Components
Loading preview...
Here is modern Status Selector component
npx shadcn@latest add https://21st.dev/r/ln-dev7/status-selector// demo.tsx
'use client';
import * as React from 'react';
import StatusSelector, { allStatus } from '@/components/ui/status-selector';
import type { Status } from '@/components/ui/status-selector';
const StatusSelectorDemo = () => {
const [currentStatus, setCurrentStatus] = React.useState<Status>(allStatus[1]);
const handleStatusChange = (newStatus: Status) => {
setCurrentStatus(newStatus);
};
const CurrentStatusIcon = currentStatus.icon;
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">
<h2 className="text-lg font-semibold">Status Selector Demo</h2>
<p className="text-sm text-muted-foreground">
Click the icon to change the current status.
</p>
</div>
<StatusSelector status={currentStatus} onChange={handleStatusChange} />
<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 Status</h3>
<div
className="flex items-center gap-2.5 text-lg font-semibold"
style={{ color: currentStatus.color }}
>
<CurrentStatusIcon className="size-5" />
<span>{currentStatus.name}</span>
</div>
</div>
</div>
);
};
export { StatusSelectorDemo as DemoOne };