feat: implement sign-up page with form validation and shared layout structure

.github/workflows/ci.yml

@@ -0,0 +1,45 @@
+name: Nextblog CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+# This cancels previous runs if you push again to the same PR
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  quality-check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Format Check
+        run: pnpm run format:check
+
+      - name: Run Lint
+        run: pnpm run lint
+
+      - name: Type Check
+        run: pnpm exec tsc --noEmit
+
+      - name: Build Project
+        run: pnpm run build

AGENTS.md

@@ -1,5 +1,7 @@
 <!-- BEGIN:nextjs-agent-rules -->
+
 # This is NOT the Next.js you know
 
 This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+
 <!-- END:nextjs-agent-rules -->

app/(shared-layout)/layout.tsx

@@ -0,0 +1,14 @@
+import Navbar from "@/components/web/navbar";
+
+export default function SharedLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  );
+}

app/page.tsx → app/(shared-layout)/page.tsx

@@ -1,3 +1,3 @@
 export default function Page() {
-  return <h1>Home Page</h1>
-}
+  return <h1>Home Page</h1>;
+}

app/auth/login/page.tsx

@@ -1,3 +1,3 @@
 export default function LoginPage() {
-  return <h1>Login Page</h1>
-}
+  return <h1>Login Page</h1>;
+}

app/auth/sign-up/layout.tsx

@@ -0,0 +1,21 @@
+import { buttonVariants } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import Link from "next/link";
+
+export default function authLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="absolute top-5 left-5">
+        <Link href="/" className={buttonVariants({ variant: "secondary" })}>
+          <ArrowLeft className="size-4" />
+          Back to Home
+        </Link>
+      </div>
+      <div className="w-full max-w-md mx-auto">{children}</div>
+    </div>
+  );
+}

app/auth/sign-up/page.tsx

@@ -1,3 +1,107 @@
+"use client";
+
+import { signUpSchema } from "@/app/schemas/auth";
+import { z } from "zod";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Button } from "@/components/ui/button";
+
 export default function SignupPage() {
-  return <h1>Sign Up Page</h1>
-}
+  const form = useForm<z.infer<typeof signUpSchema>>({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    resolver: zodResolver(signUpSchema as any),
+    defaultValues: {
+      name: "",
+      email: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = () => {
+    console.log("yoo");
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Sign Up</CardTitle>
+        <CardDescription>Create a new account to get started</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            <Controller
+              control={form.control}
+              name="name"
+              render={({ field, fieldState }) => (
+                <Field>
+                  <FieldLabel>Full Name</FieldLabel>
+                  <Input
+                    aria-invalid={fieldState.invalid}
+                    placeholder="Jhon Doe"
+                    {...field}
+                  />
+                  {fieldState.error && (
+                    <FieldError>{fieldState.error.message}</FieldError>
+                  )}
+                </Field>
+              )}
+            />
+            <Controller
+              control={form.control}
+              name="email"
+              render={({ field, fieldState }) => (
+                <Field>
+                  <FieldLabel>Email</FieldLabel>
+                  <Input
+                    aria-invalid={fieldState.invalid}
+                    placeholder="jhon@doe.com"
+                    type="email"
+                    {...field}
+                  />
+                  {fieldState.error && (
+                    <FieldError>{fieldState.error.message}</FieldError>
+                  )}
+                </Field>
+              )}
+            />
+            <Controller
+              control={form.control}
+              name="password"
+              render={({ field, fieldState }) => (
+                <Field>
+                  <FieldLabel>Password</FieldLabel>
+                  <Input
+                    aria-invalid={fieldState.invalid}
+                    placeholder="********"
+                    type="password"
+                    {...field}
+                  />
+                  {fieldState.error && (
+                    <FieldError>{fieldState.error.message}</FieldError>
+                  )}
+                </Field>
+              )}
+            />
+
+            <Button type="submit">Sign up</Button>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

app/globals.css

@@ -127,4 +127,4 @@
   html {
     @apply font-sans;
   }
-}
+}

app/layout.tsx

@@ -1,12 +1,11 @@
 import type { Metadata } from "next";
 import React from "react";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Outfit, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import Navbar from "@/components/web/navbar";
 import { ThemeProvider } from "@/components/ui/theme-provider";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const outfit = Outfit({
+  variable: "--font-sans",
   subsets: ["latin"],
 });
 
@@ -27,7 +26,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+        className={`${outfit.variable} ${geistMono.variable} font-sans h-full antialiased`}
       >
         <ThemeProvider
           attribute="class"
@@ -36,7 +35,6 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <main className={"w-full max-auto px-4 md:px-6 lg:px-8"}>
-            <Navbar />
             {children}
           </main>
         </ThemeProvider>

app/schemas/auth.ts

@@ -0,0 +1,10 @@
+import z from "zod";
+
+export const signUpSchema = z.object({
+  name: z
+    .string()
+    .min(3, "Name must be at least 3 characters long")
+    .max(30, "Name must be at most 30 characters long"),
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(6, "Password must be at least 6 characters long"),
+});

components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -38,8 +38,8 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 function Button({
   className,
@@ -49,9 +49,9 @@ function Button({
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot.Root : "button"
+  const Comp = asChild ? Slot.Root : "button";
 
   return (
     <Comp
@@ -61,7 +61,7 @@ function Button({
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };