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 885927a commit 27a90dc
Showing 1 changed file with 218 additions and 3 deletions.
221 changes: 218 additions & 3 deletions preview-ui/src/Preview.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,218 @@
export default function Empty() {
return <p>vx.dev</p>;
}
import { useState } from 'react';
import { ResponsiveBar } from "@nivo/bar";
import { ResponsiveLine } from "@nivo/line";
import {
Avatar,
AvatarImage,
AvatarFallback,
Badge,
Button,
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
Checkbox,
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
Input,
Label,
Progress,
RadioGroup,
RadioGroupItem,
ScrollArea,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui";
import { ArrowRight, Check, Home, User, Settings } from "lucide-react";

export default function ColorfulUI() {
const [selectedTab, setSelectedTab] = useState("profile");

return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
{/* Header */}
<header className="w-full p-4 bg-white shadow-lg">
<div className="flex items-center justify-between">
<h1 className="text-xl font-bold text-gray-800">Colorful Dashboard</h1>
<nav className="flex space-x-4">
<Button asChild>
<a href="#home"><Home className="w-6 h-6 text-indigo-500" /></a>
</Button>
<Button asChild>
<a href="#settings"><Settings className="w-6 h-6 text-pink-500" /></a>
</Button>
</nav>
</div>
</header>

{/* Main Content */}
<main className="flex-grow w-full max-w-4xl p-8 mt-6 bg-white rounded-lg shadow-md">
{/* Profile Card */}
<section className="mb-8">
<Card>
<CardHeader>
<div className="flex items-center space-x-4">
<Avatar>
<AvatarImage src="https://avatars.githubusercontent.com/u/9919?s=280&v=4" />
<AvatarFallback>GH</AvatarFallback>
</Avatar>
<div>
<CardTitle>GitHub</CardTitle>
<CardDescription>github.com</CardDescription>
</div>
</div>
<Badge variant="solid" className="ml-auto">PRO</Badge>
</CardHeader>
<CardContent>
<p>Explore the power of collaboration and community.</p>
</CardContent>
<CardFooter>
<Button variant="solid">Follow</Button>
</CardFooter>
</Card>
</section>

{/* Tabs & Progress Bar */}
<section className="mb-8">
<Tabs defaultValue="profile" className="mb-4">
<TabsList>
<TabsTrigger value="profile" onSelect={() => setSelectedTab("profile")}>Profile</TabsTrigger>
<TabsTrigger value="activity" onSelect={() => setSelectedTab("activity")}>Activity</TabsTrigger>
</TabsList>
<TabsContent value="profile">Profile Information</TabsContent>
<TabsContent value="activity">Recent Activity</TabsContent>
</Tabs>

<div className="flex items-center mb-4">
<Label htmlFor="progress" className="mr-4">Profile Completion:</Label>
<Progress id="progress" value={70} className="flex-1" />
<span className="ml-4">70%</span>
</div>
</section>

{/* Forms & Charts */}
<section className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Form */}
<div>
<Collapsible>
<CollapsibleTrigger className="mb-4">Update Profile</CollapsibleTrigger>
<CollapsibleContent>
<div className="mb-4">
<Label htmlFor="fullName">Full Name</Label>
<Input id="fullName" placeholder="Enter your full name" />
</div>
<div className="mb-4">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="Enter your email" />
</div>
<div className="mb-4">
<Label htmlFor="country">Country</Label>
<Select>
<SelectTrigger>
<SelectValue placeholder="Select your country" />
</SelectTrigger>
<SelectContent>
<SelectItem value="us">United States</SelectItem>
<SelectItem value="ca">Canada</SelectItem>
<SelectItem value="uk">United Kingdom</SelectItem>
</SelectContent>
</Select>
</div>
<div className="mb-4">
<Checkbox id="newsletter">Subscribe to newsletter</Checkbox>
</div>
<Button variant="solid" className="w-full">Update</Button>
</CollapsibleContent>
</Collapsible>
</div>

{/* Charts */}
<div>
{/* Bar Chart */}
{selectedTab === "profile" && (
<div className="w-full h-64 bg-gray-200 rounded-lg p-4">
<ResponsiveBar
data={[
{ category: "Jan", value: 120 },
{ category: "Feb", value: 150 },
{ category: "Mar", value: 80 },
]}
keys={["value"]}
indexBy="category"
margin={{ top: 50, right: 50, bottom: 50, left: 60 }}
padding={0.3}
colors={{ scheme: "nivo" }}
borderColor={{ from: "color", modifiers: [["darker", 1.6]] }}
axisBottom={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'Month',
legendPosition: 'middle',
legendOffset: 32
}}
animate={true}
/>
</div>
)}
{/* Line Chart */}
{selectedTab === "activity" && (
<div className="w-full h-64 bg-gray-200 rounded-lg p-4">
<ResponsiveLine
data={[
{
"id": "Activity",
"data": [
{ "x": "Jan", "y": 10 },
{ "x": "Feb", "y": 50 },
{ "x": "Mar", "y": 100 },
]
}
]}
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
xScale={{ type: 'point' }}
yScale={{
type: 'linear',
stacked: true,
min: 'auto',
max: 'auto',
}}
axisBottom={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'Month',
legendPosition: 'middle',
legendOffset: 36
}}
colors={{ scheme: 'nivo' }}
pointSize={10}
pointColor={{ from: 'color', modifiers: [] }}
pointBorderWidth={2}
pointBorderColor={{ from: 'serieColor', modifiers: [] }}
useMesh={true}
animate={true}
/>
</div>
)}
</div>
</section>
</main>

{/* Footer */}
<footer className="w-full p-4 bg-white shadow-inner">
<div className="text-center text-xs text-gray-500">© 2023 Colorful Dashboard Inc.</div>
</footer>
</div>
);
};

0 comments on commit 27a90dc

Please sign in to comment.