[vx.dev] prompt:

{
  "prompt": "create colorful UI\n\r\n\r\ncreate a UI like this, but add dark mode.",
  "images": [
    "https://github.com/Yuyz0112/vx.dev/assets/13651389/8333a626-3db4-4ece-8042-43a1c3591e18"
  ]
}

preview-ui/src/Preview.jsx

@@ -1,57 +1,63 @@
+import { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Check } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
+import { Check } from 'lucide-react';
 
 export default function DeploymentStatusCard() {
+  const [darkMode, setDarkMode] = useState(false);
+
   return (
-    <div className="max-w-md mx-auto mt-10">
-      <Card>
-        <CardHeader className="bg-gray-100 p-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center">
-              <img
-                src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-                alt="Cloud"
-                className="w-10 h-10 rounded-full"
-              />
-              <CardTitle className="ml-2">Deploying with Cloudflare Pages</CardTitle>
-            </div>
-            <Badge variant="outline" className="text-orange-500 border-orange-500">
-              bot
-            </Badge>
-          </div>
-        </CardHeader>
-        <CardContent className="p-4">
-          <div className="space-y-4">
-            <div className="flex justify-between items-center">
-              <CardDescription>Latest commit:</CardDescription>
-              <span className="font-mono text-sm">5bf0023</span>
+    <div className={`${darkMode ? 'dark' : ''}`}>
+      <div className="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex justify-center items-center">
+        <Card className="max-w-md w-full bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+          <CardHeader className="flex justify-between items-center bg-gray-200 dark:bg-gray-700 p-4">
+            <div className="flex items-center space-x-2">
+              <CardTitle className="text-lg font-semibold text-gray-900 dark:text-white">
+                Deploying with Cloudflare Pages
+              </CardTitle>
             </div>
-            <div className="flex justify-between items-center">
-              <CardDescription>Status:</CardDescription>
-              <div className="flex items-center">
-                <Check className="w-4 h-4 text-green-500" />
-                <span className="ml-1 text-green-500">Deploy successful!</span>
+            <Switch checked={darkMode} onChange={setDarkMode} />
+          </CardHeader>
+          <CardContent className="p-4">
+            <div className="space-y-4">
+              <div className="flex justify-between items-center">
+                <CardDescription className="font-medium text-gray-600 dark:text-gray-300">
+                  Latest commit:
+                </CardDescription>
+                <span className="text-gray-900 dark:text-white">5bf0023</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <CardDescription className="font-medium text-gray-600 dark:text-gray-300">
+                  Status:
+                </CardDescription>
+                <div className="flex items-center space-x-1">
+                  <Check className="text-green-500" />
+                  <span className="text-green-500 dark:text-green-400 font-semibold">Deploy successful!</span>
+                </div>
+              </div>
+              <div className="flex justify-between items-center">
+                <CardDescription className="font-medium text-gray-600 dark:text-gray-300">
+                  Preview URL:
+                </CardDescription>
+                <a href="https://42c9b8a7.vx-dev.pages.dev" className="text-blue-600 dark:text-blue-400 hover:underline">
+                  https://42c9b8a7.vx-dev.pages.dev
+                </a>
+              </div>
+              <div className="flex justify-between items-center">
+                <CardDescription className="font-medium text-gray-600 dark:text-gray-300">
+                  Branch Preview URL:
+                </CardDescription>
+                <a href="https://ui-gen-issue-2.vx-dev.pages.dev" className="text-blue-600 dark:text-blue-400 hover:underline">
+                  https://ui-gen-issue-2.vx-dev.pages.dev
+                </a>
               </div>
             </div>
-            <div className="flex justify-between items-center">
-              <CardDescription>Preview URL:</CardDescription>
-              <a href="https://42c9b8a7.vx-dev.pages.dev" className="text-blue-500 hover:underline">
-                https://42c9b8a7.vx-dev.pages.dev
-              </a>
-            </div>
-            <div className="flex justify-between items-center">
-              <CardDescription>Branch Preview URL:</CardDescription>
-              <a href="https://ui-gen-issue-2.vx-dev.pages.dev" className="text-blue-500 hover:underline">
-                https://ui-gen-issue-2.vx-dev.pages.dev
-              </a>
-            </div>
+          </CardContent>
+          <div className="bg-gray-200 dark:bg-gray-700 p-4 text-right">
+            <a href="#" className="text-blue-600 dark:text-blue-400 hover:underline">View logs</a>
           </div>
-        </CardContent>
-        <div className="bg-gray-100 p-4 text-center">
-          <a href="#" className="text-blue-600 hover:underline">View logs</a>
-        </div>
-      </Card>
+        </Card>
+      </div>
     </div>
   );
 }