build: basic structure - output form (+ refactoring)

NemesisLW · Jul 11, 2024 · 1934c63 · 1934c63
1 parent 74c6ee9
commit 1934c63
Show file tree

Hide file tree

Showing 14 changed files with 83 additions and 29 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,6 @@
 {
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": [
+    "prettier-plugin-tailwindcss",
+    "@ianvs/prettier-plugin-sort-imports"
+  ]
 }
diff --git a/app/(auth)/auth/callback/route.ts b/app/(auth)/auth/callback/route.ts
@@ -1,7 +1,7 @@
-import { cookies } from "next/headers";
-import { NextResponse } from "next/server";
 import { createServerClient, type CookieOptions } from "@supabase/ssr";
 import { revalidatePath } from "next/cache";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
 
 export async function GET(request: Request) {
   const { searchParams, origin } = new URL(request.url);

diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import UserAuthForm from "@/components/auth/user-auth-form";
+import { cn } from "@/lib/utils";
 import { Inter } from "next/font/google";
 import Link from "next/link";
+import React from "react";
 
-import { cn } from "@/lib/utils";
-import UserAuthForm from "@/components/auth/user-auth-form";
 const inter = Inter({ subsets: ["latin"] });
 
 function LoginPage() {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,6 @@
+import { Toaster } from "@/components/ui/sonner";
 import type { Metadata } from "next";
 import { Grand_Hotel } from "next/font/google";
-
 import "./globals.css";
 
 const titlefont = Grand_Hotel({ subsets: ["latin"], weight: "400" });
@@ -17,7 +17,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={titlefont.className}>{children}</body>
+      <body className={titlefont.className}>
+        <main>{children}</main>
+        <Toaster richColors />
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,5 @@
-import Image from "next/image";
-
 import GenerateButton from "@/components/generate-cta-button";
+import Image from "next/image";
 import Link from "next/link";
 
 export default function Home() {

diff --git a/components/auth/sign-out-button.tsx b/components/auth/sign-out-button.tsx
@@ -1,6 +1,5 @@
-import React from "react";
-
 import { signOut } from "@/lib/supabase/actions";
+import React from "react";
 import { Button } from "../ui/button";
 
 function SignOutButton() {

diff --git a/components/auth/user-auth-form.tsx b/components/auth/user-auth-form.tsx
@@ -1,10 +1,8 @@
-import React, { Suspense } from "react";
-import Image from "next/image";
-
+import { Login } from "@/lib/supabase/actions";
 import { cn } from "@/lib/utils";
-
+import Image from "next/image";
+import React, { Suspense } from "react";
 import { buttonVariants } from "../ui/button";
-import { Login } from "@/lib/supabase/actions";
 
 function UserAuthForm() {
   return (

diff --git a/components/generate-cta-button.tsx b/components/generate-cta-button.tsx
@@ -1,6 +1,6 @@
-import { Button } from "./ui/button";
-import Image from "next/image";
 import { cn } from "@/lib/utils";
+import Image from "next/image";
+import { Button } from "./ui/button";
 
 interface GenerateButtonProps {
   className?: string;

diff --git a/components/pickupline-generator.tsx b/components/pickupline-generator.tsx
@@ -1,11 +1,7 @@
 "use client";
 
-import React from "react";
-import { Textarea } from "@/components/ui/textarea";
-import { Input } from "@/components/ui/input";
-
-import GenerateButton from "./generate-cta-button";
 import { generateOutput } from "@/lib/ai/actions";
+import React from "react";
 import { useFormState, useFormStatus } from "react-dom";
 import PickupLineInputForm from "./pickupline-generator/input-form";
 import OutputForm from "./pickupline-generator/output-form";

diff --git a/components/pickupline-generator/output-form.tsx b/components/pickupline-generator/output-form.tsx
@@ -1,8 +1,8 @@
-import { OutputSchemaType } from "@/lib/schema";
-import React from "react";
-import { Card, CardContent } from "../ui/card";
 import { copyToClipboard } from "@/lib/utils";
 import Image from "next/image";
+import React from "react";
+import GenerateButton from "../generate-cta-button";
+import { Card, CardContent } from "../ui/card";
 
 function OutputForm({ pickupLines }: { pickupLines: string[] }) {
   return (
@@ -26,6 +26,7 @@ function OutputForm({ pickupLines }: { pickupLines: string[] }) {
           </CardContent>
         </Card>
       ))}
+      <GenerateButton className="w-full" text="Regenerate Pickup Line" />
     </div>
   );
 }

diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/lib/utils.ts b/lib/utils.ts
@@ -1,4 +1,5 @@
-import { type ClassValue, clsx } from "clsx";
+import { clsx, type ClassValue } from "clsx";
+import { toast } from "sonner";
 import { twMerge } from "tailwind-merge";
 import { OutputSchema, OutputSchemaType } from "./schema";
 
@@ -10,10 +11,11 @@ export const copyToClipboard = (text: string) => {
   navigator.clipboard
     .writeText(text)
     .then(() => {
-      alert("Copied to clipboard!");
+      toast.success("Copied to clipboard!");
     })
     .catch((err) => {
       console.error("Failed to copy: ", err);
+      toast.error("Failed to copy!");
     });
 };
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,10 +20,12 @@
     "lucide-react": "^0.403.0",
     "next": "14.2.4",
     "next-auth": "^5.0.0-beta.19",
+    "next-themes": "^0.3.0",
     "openai": "^4.52.7",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
+    "sonner": "^1.5.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"