Skip to content

Commit

Permalink
[vx.dev] prompt:
Browse files Browse the repository at this point in the history 
{
  "prompt": "create colorful UI\n",
  "images": []
}
  • Loading branch information
@Yuyz0112
Yuyz0112 committed Dec 21, 2023
1 parent b854d5c commit f1dc1bf
Showing 1 changed file with 225 additions and 2 deletions.
227 changes: 225 additions & 2 deletions preview-ui/src/Preview.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,226 @@
export default function Empty() {
return <p>vx.dev</p>;
import { useEffect, useState } from "react";
import { ResponsiveBar } from "@nivo/bar";
import { ResponsiveLine } from "@nivo/line";
import { ResponsivePie } from "@nivo/pie";
import { ResponsiveScatterPlot } from "@nivo/scatterplot";
import { ResponsiveHeatMap } from "@nivo/heatmap";
import { ArrowRight, Home, User, Search, Settings } from "lucide-react";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
CardDescription,
} from "@/components/ui/card";
import {
Avatar,
AvatarImage,
AvatarFallback,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

function App() {
return (
<div className="p-8">
{/* Header */}
<header className="flex items-center justify-between mb-12">
<h1 className="text-4xl font-bold text-gray-800">
Dashboard
</h1>
<div className="flex items-center space-x-4">
<Input placeholder="Search" className="border-none" />
<Avatar>
<AvatarImage src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c" />
<AvatarFallback>U</AvatarFallback>
</Avatar>
</div>
</header>

{/* Cards & Charts Section */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<Card>
<CardHeader>
<CardTitle>Total Sales</CardTitle>
<CardDescription>Compared to last week</CardDescription>
</CardHeader>
<CardContent>
<p className="text-3xl font-semibold">$ 24,500</p>
</CardContent>
<CardFooter>
<Badge variant="solid" color="green">
+5.5%
</Badge>
</CardFooter>
</Card>

<Card>
<CardHeader>
<CardTitle>New Customers</CardTitle>
<CardDescription>Compared to last month</CardDescription>
</CardHeader>
<CardContent>
<p className="text-3xl font-semibold">1,250</p>
</CardContent>
<CardFooter>
<Badge variant="solid" color="red">
-3.2%
</Badge>
</CardFooter>
</Card>

<Card>
<CardHeader>
<CardTitle>Visits</CardTitle>
<CardDescription>Real-time</CardDescription>
</CardHeader>
<CardContent>
<div className="w-full h-56">
<ResponsiveLine
data={[
{
id: "Visits",
data: [
{ x: "1:00", y: 10 },
{ x: "2:00", y: 50 },
{ x: "3:00", y: 100 },
{ x: "4:00", y: 75 },
{ x: "5:00", y: 50 },
],
},
]}
enableCrosshair={false}
enablePoints={false}
curve="monotoneX"
margin={{ top: 25, right: 30, bottom: 25, left: 30 }}
xScale={{ type: "point" }}
yScale={{
type: "linear",
min: "auto",
max: "auto",
}}
axisTop={null}
axisRight={null}
axisLeft={{
orient: 'left',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'visits',
legendOffset: -40,
legendPosition: 'middle'
}}
colors={{ scheme: "category10" }}
/>
</div>
</CardContent>
</Card>

<div className="w-full h-80 p-4 bg-gradient-to-r from-blue-500 to-blue-300 rounded-md shadow-lg">
<ResponsivePie
data={[
{ id: "A", value: 10 },
{ id: "B", value: 20 },
{ id: "C", value: 30 },
{ id: "D", value: 40 },
]}
sortByValue={true}
innerRadius={0.5}
padAngle={0.5}
cornerRadius={3}
colors={{ scheme: "blues" }}
animate={true}
borderWidth={2}
borderColor={{ from: 'color', modifiers: [ [ 'darker', 0.5 ] ] }}
/>
</div>
</div>

{/* Analytics Section */}
<section className="mb-6">
<Alert>
<AlertTitle>Last month's analytics</AlertTitle>
<AlertDescription>
Detailed analytics from the last month.
</AlertDescription>
<Button asChild>
<a className="hover:underline">View full report</a>
</Button>
</Alert>
</section>

{/* Forms Section */}
<section className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div className="bg-white rounded-md shadow-lg p-6 space-y-6">
<h2 className="text-xl font-medium text-gray-900">Profile Settings</h2>
<div>
<Label className="block mb-2" htmlFor="username">Username</Label>
<Input id="username" className="w-full" />
</div>
<div>
<Label className="block mb-2" htmlFor="email">Email Address</Label>
<Input id="email" className="w-full" />
</div>
<div>
<Label className="block mb-2" htmlFor="bio">Bio</Label>
<Textarea id="bio" className="w-full" rows={3} />
</div>
<div className="flex items-center">
<Checkbox id="public-profile" />
<Label className="ml-4" htmlFor="public-profile">Public Profile</Label>
</div>
<Button variant="solid" color="blue">
Save Changes
</Button>
</div>

<div className="bg-white rounded-md shadow-lg p-6 space-y-6">
<h2 className="text-xl font-medium text-gray-900">Notification Settings</h2>
<div>
<Label className="block mb-2" htmlFor="notifications">Notifications</Label>
<Select defaultValue="">
<SelectTrigger id="notification-trigger">
<SelectValue />
</SelectTrigger>
<SelectContent id="notifications">
<SelectItem value="Email">Email</SelectItem>
<SelectItem value="Push">Push</SelectItem>
<SelectItem value="SMS">SMS</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center">
<Checkbox id="marketing-emails" />
<Label className="ml-4" htmlFor="marketing-emails">Receive marketing emails</Label>
</div>
<div className="flex items-center">
<Checkbox id="product-updates" />
<Label className="ml-4" htmlFor="product-updates">Product updates</Label>
</div>
<div className="flex items-center">
<Checkbox id="security-alerts" />
<Label className="ml-4" htmlFor="security-alerts">Security alerts</Label>
</div>
<Button variant="solid" color="blue">
Save Changes
</Button>
</div>
</section>

{/* Footer */}
<footer className="text-center">
<p className="text-sm text-gray-500">All rights reserved © YourCompany 2022</p>
</footer>
</div>
);
}

export default App;

0 comments on commit f1dc1bf

Please sign in to comment.