Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[vx.dev] implements #2 #8

Closed
wants to merge 1 commit into from
Closed

[vx.dev] implements #2 #8

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 106 additions & 2 deletions preview-ui/src/Preview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,107 @@
export default function Empty() {
return <p>vx.dev</p>;
import React from 'react';
import { ResponsiveBar } from "@nivo/bar";
import { Camera, Heart, Settings, Star } from 'lucide-react';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
Button,
Badge,
Avatar,
AvatarImage,
AvatarFallback
} from "@/components/ui/card";
import "@/components/ui/tailwind.css";

function ColorfulUI() {
return (
<div className="font-sans">
{/* Header with Avatar and Badges */}
<div className="bg-blue-400 text-white p-5 flex justify-between items-center">
<div className="flex items-center">
<Avatar>
<AvatarImage src="https://images.unsplash.com/photo-1599834562135-b6fc90e642ca?w=250&dpr=2&q=80" alt="Profile image" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<div className="ml-3">
<h1 className="text-2xl font-bold">Jane Doe</h1>
<p>UI/UX Designer</p>
</div>
</div>
<div className="space-x-2">
<Badge variant="solid" className="bg-purple-500">PRO</Badge>
<Badge variant="solid" className="bg-green-500">New</Badge>
<Badge variant="solid" className="bg-red-500">Sale</Badge>
</div>
</div>

{/* Content Area with Cards */}
<div className="p-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<Card>
<CardHeader>
<CardTitle>Photography</CardTitle>
<CardDescription>Snap and edit like a pro</CardDescription>
</CardHeader>
<CardContent className="flex justify-between items-center p-4 bg-yellow-200">
<Camera className="w-12 h-12 text-yellow-900" />
<Button variant="solid" className="bg-yellow-500 text-yellow-900">Learn More</Button>
</CardContent>
<CardFooter className="flex justify-between items-center p-4 bg-yellow-100">
<Star className="w-5 h-5 text-yellow-400" />
<p className="text-yellow-800">4.8 Rating</p>
</CardFooter>
</Card>

<Card>
<CardHeader>
<CardTitle>Favorite Places</CardTitle>
<CardDescription>Bookmark your loves</CardDescription>
</CardHeader>
<CardContent className="flex justify-between items-center p-4 bg-pink-200">
<Heart className="w-12 h-12 text-pink-900" />
<Button variant="solid" className="bg-pink-500 text-pink-900">View All</Button>
</CardContent>
<CardFooter className="flex justify-between items-center p-4 bg-pink-100">
<Settings className="w-5 h-5 text-pink-400" />
<p className="text-pink-800">Settings</p>
</CardFooter>
</Card>

{/* Bar Chart Card */}
<Card>
<CardHeader>
<CardTitle>Annual Review</CardTitle>
<CardDescription>Yearly performance</CardDescription>
</CardHeader>
<CardContent className="h-64">
<ResponsiveBar
data={[
{ name: "Jan", Sales: 200 },
{ name: "Feb", Sales: 400 },
{ name: "Mar", Sales: 300 },
{ name: "Apr", Sales: 500 },
]}
keys={["Sales"]}
indexBy="name"
margin={{ top: 50, right: 50, bottom: 50, left: 60 }}
padding={0.3}
colors={{ scheme: 'nivo' }}
borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
labelTextColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
/>
</CardContent>
</Card>
</div>

{/* Footer */}
<footer className="bg-blue-500 p-5 text-white text-center">
<p>&copy;2023 Colorful UI. A React Prototype by Jane Doe.</p>
</footer>
</div>
);
}

export default ColorfulUI;