Components
Loading preview...
Here is modern project badge component
npx shadcn@latest add https://21st.dev/r/ln-dev7/project-badge// demo.tsx
'use client';
import * as React from 'react';
import { GitBranch, Star, Zap } from 'lucide-react';
import ProjectBadge, { projects } from '@/components/ui/project-badge';
const ProjectBadgeDemo = () => {
return (
<div className="flex w-full flex-col items-center justify-center gap-10 p-4">
<div className="flex flex-col items-center gap-2 text-center">
<h2 className="text-lg font-semibold">Project Badges</h2>
<p className="text-sm text-muted-foreground">
Clickable badges to represent different projects.
</p>
</div>
<div className="flex flex-wrap items-center justify-center gap-4">
{projects.map((project) => (
<ProjectBadge key={project.id} project={project} href="#" />
))}
</div>
<div className="w-full max-w-lg space-y-4">
<h3 className="text-center font-medium text-muted-foreground">Example Usage in a List</h3>
<ul className="divide-y divide-border rounded-lg border">
<li className="flex items-center justify-between p-4">
<div className="flex items-center gap-3">
<Zap className="size-5 text-yellow-500" />
<span className="font-medium">Design new landing page</span>
</div>
<ProjectBadge project={projects[0]} href="#" />
</li>
<li className="flex items-center justify-between p-4">
<div className="flex items-center gap-3">
<GitBranch className="size-5 text-blue-500" />
<span className="font-medium">Refactor state management</span>
</div>
<ProjectBadge project={projects[2]} href="#" />
</li>
<li className="flex items-center justify-between p-4">
<div className="flex items-center gap-3">
<Star className="size-5 text-green-500" />
<span className="font-medium">Write API documentation</span>
</div>
<ProjectBadge project={projects[1]} href="#" />
</li>
</ul>
</div>
</div>
);
};
export { ProjectBadgeDemo as DemoOne };