feature: fix 样式

Author: aihunter

app/page.tsx

@@ -9,10 +9,10 @@ export default function Home() {
       {/* flex flex-col items-center justify-center min-h-[85vh] px-8 font-sans */}
       <main className="w-full max-w-6xl mx-auto">
         <h1 className="text-3xl font-bold text-center">汉语新解</h1>
-        <h2 className="text-lg text-center font-sans font-semibold inline-flex gap-2 items-center justify-center mx-auto w-full">
-          输入一个汉语词汇，获取一个全新的解释
+        <h2 className="text-lg text-center font-sans font-semibold flex flex-col sm:flex-row gap-2 items-center justify-center mx-auto w-full">
+          <span>输入一个汉语词汇，获取一个全新的解释</span>
           <WordRotate
-            className=" bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-sky-500"
+            className="bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-sky-500"
             words={["国足", "程序员", "打工人", "天选之子"]}
           />
         </h2>

components/PresetTemplateGrid.tsx

@@ -119,7 +119,7 @@ const PresetTemplateGrid: React.FC<PresetTemplateGridProps> = ({
                 onClick={() => copyImageToClipboard(template.svg)}
               >
                 <Copy className="w-4 h-4 mr-2" />
-                复制图片
+                复制图片 (PC端)
               </Button>
               <Button
                 variant="outline"

components/svg-generator.tsx

@@ -6,12 +6,10 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Loader2, Copy, Download } from "lucide-react";
-import { toast } from "react-toastify";
+import { toast } from "sonner";
 import { presetTemplates } from "@/lib/constants";
 import PresetTemplateGrid from "./PresetTemplateGrid";
 
-const presetPrompts = ["国足", "程序员", "打工人"];
-
 export default function SvgGenerator() {
   const [text, setText] = useState("");
   const [svg, setSvg] = useState("");

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 }

package.json

@@ -18,11 +18,13 @@
     "framer-motion": "^11.5.4",
     "lucide-react": "^0.439.0",
     "next": "14.2.10",
+    "next-themes": "^0.3.0",
     "openai": "^4.59.0",
     "react": "^18",
     "react-dom": "^18",
     "react-toastify": "^10.0.5",
     "react-type-animation": "^3.2.0",
+    "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },