43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
'use client';
|
||
|
||
import { type ServiceFieldsFragment } from '@repo/graphql/types';
|
||
import { Badge } from '@repo/ui/components/ui/badge';
|
||
import { cn } from '@repo/ui/lib/utils';
|
||
import { getMinutes } from '@repo/utils/datetime-format';
|
||
|
||
type ServiceCardProps = Pick<ServiceFieldsFragment, 'active' | 'duration' | 'name'>;
|
||
|
||
export function ServiceCard({ active, duration, name }: Readonly<ServiceCardProps>) {
|
||
return (
|
||
<div
|
||
className={cn(
|
||
'w-full rounded-2xl border-2 bg-background p-4 dark:bg-primary/5',
|
||
// active ? '' : 'opacity-50',
|
||
)}
|
||
>
|
||
<div className="flex w-full items-center justify-between gap-2">
|
||
<span className="text-base font-semibold text-foreground">{name}</span>
|
||
{active ? (
|
||
<span
|
||
className={cn(
|
||
'inline-flex items-center gap-1 px-4 p-2 rounded-full bg-secondary dark:bg-background text-primary text-xs font-medium',
|
||
)}
|
||
>
|
||
<svg
|
||
className="size-4 opacity-70"
|
||
fill="currentColor"
|
||
viewBox="0 0 16 16"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path d="M8 1.5a6.5 6.5 0 1 0 0 13a6.5 6.5 0 0 0 0-13ZM2.5 8a5.5 5.5 0 1 1 11 0a5.5 5.5 0 0 1-11 0Zm6-2.75a.5.5 0 0 0-1 0v3c0 .28.22.5.5.5h2a.5.5 0 0 0 0-1H8.5V5.25Z" />
|
||
</svg>
|
||
{getMinutes(duration) + ' мин'}
|
||
</span>
|
||
) : (
|
||
<Badge variant="destructive">Закрыта</Badge>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|