Merge branch 'development' into feature/error-handling

Author: Rikthepixel

src/components/controls/Button.tsx

@@ -4,10 +4,10 @@ import { twMerge } from "tailwind-merge";
 
 import { RequiredKeys } from "@/types/utility";
 
-export const style = cva("flex items-center justify-center transition-colors shadow-sm px-3 py-2 gap-2 rounded-md", {
+export const style = cva("flex items-center justify-center transition-colors shadow-sm px-3 py-2 gap-2 rounded-full", {
   variants: {
     color: {
-      secondary: "bg-secondary hover:bg-secondary-dark text-secondary-contrast"
+      secondary: "bg-secondary hover:bg-secondary-light text-secondary-contrast"
     }
   }
 });

src/components/controls/Input.tsx

@@ -0,0 +1,57 @@
+import { ForwardedRef, forwardRef, InputHTMLAttributes, useMemo } from "react";
+import { cva, VariantProps as GetVariantProps } from "class-variance-authority";
+import { twMerge } from "tailwind-merge";
+
+import { RequiredKeys } from "@/types/utility";
+
+export const style = cva("rounded-full py-2 px-3", {
+  variants: {
+    variant: {
+      outlined: "border-2"
+    },
+    color: {
+      primary: ""
+    },
+  },
+  compoundVariants: [
+    {
+      className: "border-primary bg-white",
+      color: "primary",
+      variant: "outlined"
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "outlined"
+  }
+});
+
+export type TagProps = Omit<InputHTMLAttributes<HTMLInputElement>, "color">;
+export type VariantProps = GetVariantProps<typeof style>;
+export type InputProps = TagProps & RequiredKeys<VariantProps, "color" | "variant">;
+
+const Input = forwardRef((
+  {
+    className,
+    color,
+    variant,
+    ...props
+  }: InputProps,
+  ref: ForwardedRef<HTMLInputElement>
+) => {
+
+  const computedClassName = useMemo(
+    () => twMerge(style({ color, variant }), className),
+    [className, color, variant]
+  );
+
+  return (
+    <input
+      ref={ref}
+      className={computedClassName}
+      {...props}
+    />
+  );
+});
+
+export default Input;

src/components/controls/TextArea.tsx

@@ -0,0 +1,36 @@
+import { DetailedHTMLProps, ForwardedRef, forwardRef, TextareaHTMLAttributes, useMemo } from "react";
+import { twMerge } from "tailwind-merge";
+
+import { RequiredKeys } from "@/types/utility";
+
+import { style, VariantProps as InputVariantProps } from "./Input";
+
+export type TagProps = DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
+export type VariantProps = InputVariantProps;
+export type TextAreaProps = TagProps & RequiredKeys<VariantProps, "color" | "variant">;
+
+const TextArea = forwardRef((
+  {
+    className,
+    color,
+    variant,
+    ...props
+  }: TextAreaProps,
+  ref: ForwardedRef<HTMLTextAreaElement>
+) => {
+
+  const computedClassName = useMemo(
+    () => twMerge(style({ color, variant }), className),
+    [className, color, variant]
+  );
+
+  return (
+    <textarea
+      ref={ref}
+      className={computedClassName}
+      {...props}
+    />
+  );
+});
+
+export default TextArea;

src/components/navigation/Link.tsx

@@ -44,7 +44,7 @@ const Link = ({ className, color, underline, children, external, hrefLang = "en"
     <InternalLink
       className={computedClassName}
       hrefLang={hrefLang}
-      rel={`${external ? "external" : ""} ${rel}`}
+      rel={`${external ? "external" : ""} ${rel ?? ""}`}
       target={external ? "_blank" : undefined}
       {...props}
     >

src/components/navigation/NavLink.tsx

@@ -11,7 +11,7 @@ const NavLink = ({ href, currentHref, children }: NavLinkProps) => {
   const active = currentHref === href;
   return (
     <Link
-      className="text-lg font-bold py-2 border-y border-primary hover:border-primary-light aria-[current='page']:text-primary-dark aria-[current='page']:border-primary first-of-type:border-t-2 last-of-type:border-b-2 md:border-0 md:first-of-type:border-t-0 md:last-of-type:border-b-0"
+      className="text-lg font-bold py-2 border-y border-primary hover:border-primary-dark aria-[current='page']:text-primary-light aria-[current='page']:border-primary first-of-type:border-t-2 last-of-type:border-b-2 md:border-0 md:first-of-type:border-t-0 md:last-of-type:border-b-0"
       aria-current={active ? "page" : undefined}
       color="primary"
       href={href}

src/components/pages/about/Member.tsx

@@ -3,26 +3,8 @@ import { motion } from "framer-motion";
 import { IMember } from "@/assets/state/team";
 import LinkButton from "@/components/controls/LinkButton";
 
-const memberAnim = {
-  hidden: {
-    translateY: "5%",
-    transition: {
-      duration: 0.15,
-      ease: "easeOut"
-    }
-  },
-  show: {
-    translateY: "0%",
-    transition: {
-      duration: 0.15,
-      ease: "easeOut"
-    }
-  }
-} as const;
-
 const Member = ({ image, name, title, text, links, animate }: IMember & { animate: boolean; }) => (
-  <motion.div
-    variants={animate ? memberAnim : {}}
+  <li
     className="flex flex-col items-center w-full max-w-full gap-2 p-4 rounded-md shadow motion-safe:transition-all sm:p-6 md:w-fit shadow-primary"
     aria-label="Member"
   >
@@ -52,7 +34,7 @@ const Member = ({ image, name, title, text, links, animate }: IMember & { animat
         </LinkButton>
       ))}
     </div>
-  </motion.div>
+  </li>
 );
 
 export default Member;

src/components/pages/front/FeedbackSection.tsx

@@ -12,6 +12,7 @@ import Button from "@/components/controls/Button";
 import Error from "@/components/controls/Error";
 import Link from "@/components/navigation/Link";
 import { backend } from "@/utils/wretch";
+import TextArea from "@/components/controls/TextArea";
 
 const feedbackSchema = z.object({
   text: z.string()
@@ -80,11 +81,12 @@ const FeedbackSection = () => {
       <form aria-label="feedback-inbox" className="flex flex-col items-center gap-4" onSubmit={submit}>
         <AnimatePresence mode="wait">
           {(!response || response.success === false) && <motion.div className="flex flex-col items-center w-full gap-4">
-            <textarea
-              className="w-full p-4 text-lg bg-white border-2 rounded-md md:text-xl border-primary h-fit"
+            <TextArea
+            
+              className="w-full p-4 text-lg rounded-lg md:text-xl h-fit"
               placeholder="I would like this feature!"
-              {...register("text")}
               rows={5}
+              {...register("text")}
             />
             <Error className="w-full px-2 text-start" state={formState} name="text" />
             <Button type="submit" color="secondary" className="px-5 py-3 text-lg md:text-xl w-fit">

src/components/pages/front/SignupSection.tsx

@@ -13,6 +13,7 @@ import Button from "@/components/controls/Button";
 import Error from "@/components/controls/Error";
 import Link from "@/components/navigation/Link";
 import { backend } from "@/utils/wretch";
+import Input from "@/components/controls/Input";
 
 
 const signupSchema = z.object({
@@ -105,8 +106,8 @@ const SignupSection = () => {
             exit="exit"
           >
             <div className="w-full">
-              <input
-                className="w-full p-4 text-lg bg-white border-2 rounded-md md:text-xl border-primary"
+              <Input
+                className="w-full p-4 text-lg md:text-xl"
                 placeholder="your@email.com"
                 {...register("email")}
               />

src/pages/about.tsx

@@ -1,19 +1,9 @@
 import Head from "next/head";
-import { motion } from "framer-motion";
 
 import members from "@/assets/state/team";
 import Member from "@/components/pages/about/Member";
 import { Page } from "@/types/page";
 
-const membersContainerAnim = {
-  hidden: {},
-  show: {
-    transition: {
-      staggerChildren: 0.1
-    }
-  }
-} as const;
-
 const AboutPage: Page = ({ initialLoad, reduceMotion }) => {
   return (
     <>
@@ -54,17 +44,14 @@ const AboutPage: Page = ({ initialLoad, reduceMotion }) => {
           >
             Team
           </h2>
-          <motion.div
+          <ul
             className="flex flex-wrap justify-center gap-4"
             aria-label="Members"
-            initial="hidden"
-            animate="show"
-            variants={membersContainerAnim}
           >
             {members.map((member, i) => (
               <Member key={i} animate={!(reduceMotion || initialLoad)}{...member} />
             ))}
-          </motion.div>
+          </ul>
         </section>
       </main>
     </>

src/pages/index.tsx

@@ -31,9 +31,9 @@ const FrontPage: Page = ({ }) => {
         <title>Commit Rocket</title>
       </Head>
       <main aria-labelledby="hero-title" className="flex flex-col flex-1 w-full gap-4 pb-8">
-        <section aria-label="hero" className="flex flex-col-reverse items-center h-fit min-h-0 max-w-7xl lg:flex-row lg:min-h-[30rem] lg:h-[75dvh] lg:h-[75vh] mx-auto">
-          <div className="relative flex flex-col items-center justify-center h-full col-span-3 gap-8 text-center lg:w-3/5">
-            <div className="absolute w-full h-full opacity-20 aspect-square bg-gradient-radial from-primary to-transparent -z-10" aria-hidden />
+        <section aria-label="hero" className="flex flex-col-reverse items-center h-fit min-h-0 max-w-7xl xl:flex-row xl:min-h-[30rem] xl:h-[75dvh] xl:h-[75vh] mx-auto">
+          <div className="relative flex flex-col items-center justify-center h-full col-span-3 gap-8 text-center xl:w-3/5">
+            {/* <div className="absolute w-full h-full opacity-20 aspect-square bg-gradient-radial from-primary to-transparent -z-10" aria-hidden /> */}
             <h1
               id="hero-title"
               className="text-3xl font-bold lg:text-6xl text-primary"
@@ -47,8 +47,8 @@ const FrontPage: Page = ({ }) => {
               Try it Yourself
             </LinkButton>
           </div>
-          <div className="relative flex items-center justify-center w-full min-h-[20rem] max-h-[40dvh] max-h-[40vh] lg:min-h-0 lg:h-full lg:max-h-full lg:w-2/5" style={{ aspectRatio: `${LogoPicture.width} / ${LogoPicture.height}` }}>
-            <div className="absolute w-full h-full opacity-50 aspect-square bg-gradient-radial from-primary to-transparent" aria-hidden />
+          <div className="relative overflow-hidden flex items-center justify-center w-full min-h-[20rem] max-h-[40dvh] max-h-[40vh] xl:min-h-0 xl:h-full xl:max-h-full xl:w-2/5" style={{ aspectRatio: `${LogoPicture.width} / ${LogoPicture.height}` }}>
+            {/* <div className="absolute w-full h-full opacity-20 aspect-square bg-gradient-radial from-primary to-transparent" aria-hidden /> */}
             <motion.img
               className="absolute max-w-full max-h-full object-contain aspect-auto w-full rotate-[10deg] text-[0px]"
               loading="eager"