Components
Loading preview...
Here is modern project selector component
npx shadcn@latest add https://21st.dev/r/ln-dev7/project-selector'use client';
import { useState } from 'react';
import { FolderIcon } from 'lucide-react';
import ProjectSelector, { projects } from '@/components/ui/project-selector';
import type { Project } from '@/components/ui/project-selector';
const ProjectSelectorDemo = () => {
const [project, setProject] = useState<Project | undefined>(projects[0]);
const SelectedIcon = project ? project.icon : FolderIcon;
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 Selector</h2>
<p className="text-sm text-muted-foreground">Select a project from the dropdown.</p>
</div>
<ProjectSelector project={project} onChange={setProject} projectList={projects} />
<div className="flex w-full max-w-xs flex-col items-center gap-3 rounded-lg border bg-background p-6 shadow-sm">
<h3 className="text-base font-medium text-muted-foreground">Current Project</h3>
<div className="flex items-center gap-3 text-lg font-semibold">
<SelectedIcon className="size-6 text-foreground" />
<span>{project ? project.name : 'No Project'}</span>
</div>
</div>
</div>
);
};
export { ProjectSelectorDemo as DemoOne };