Ubuntu
57 lines
2.5 KiB
TypeScript
57 lines
2.5 KiB
TypeScript
import showcaseData from "@/showcase.json";
|
|
import { Card, Text, Button } from "@/components/retroui";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ArrowUpRight } from "lucide-react";
|
|
import Footer from "@/components/footer";
|
|
|
|
export default function ShowcasePage() {
|
|
return (
|
|
<>
|
|
<div className="max-w-6xl mx-auto py-12 px-4 lg:px-0">
|
|
<div className="mb-12 flex flex-col gap-2 items-start">
|
|
<Text as="h1">
|
|
Showcase
|
|
</Text>
|
|
<Text className="text-lg text-muted-foreground mb-4">
|
|
Build something cool using RetroUI? Share it with the community.
|
|
</Text>
|
|
<Button asChild>
|
|
<Link href="https://github.com/Logging-Studio/RetroUI/discussions/102" target="_blank">
|
|
Add Your Project
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{Object.entries(showcaseData).map(([key, value]) => (
|
|
<li key={key}>
|
|
<Card className="hover:shadow">
|
|
<Card.Header>
|
|
<Image
|
|
src={value.cover}
|
|
alt={value.name}
|
|
width={600}
|
|
height={400}
|
|
className="mb-6 border-2 h-[200px] w-full object-fit border-muted-foreground"
|
|
/>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<Card.Title>{value.name}</Card.Title>
|
|
|
|
<Button asChild size="sm" variant="secondary">
|
|
<Link href={value.url} target="_blank" rel="noopener noreferrer">
|
|
Visit <ArrowUpRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</Card.Header>
|
|
</Card>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<Footer />
|
|
</>
|
|
);
|
|
} |