41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { getBadge } from '@/components/shared/status';
|
|
import { ReadonlyTimeRange } from '@/components/shared/time-range';
|
|
import { useSlotQuery } from '@/hooks/api/slots';
|
|
import type * as GQL from '@repo/graphql/types';
|
|
import { cn } from '@repo/ui/lib/utils';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
type Props = GQL.SlotFieldsFragment;
|
|
|
|
export function SlotCard(props: Readonly<Props>) {
|
|
const pathname = usePathname();
|
|
const { documentId } = props;
|
|
|
|
const { data: { slot } = {} } = useSlotQuery({ documentId });
|
|
|
|
const ordersNumber = slot?.orders?.length;
|
|
const hasOrders = Boolean(ordersNumber);
|
|
|
|
return (
|
|
<Link href={`${pathname}/slots/${props.documentId}`} rel="noopener noreferrer">
|
|
<div className="flex items-center justify-between rounded-2xl bg-background p-4 px-6 dark:bg-primary/5">
|
|
<div className="flex flex-col">
|
|
<ReadonlyTimeRange timeEnd={props.time_end} timeStart={props.time_start} />
|
|
<span
|
|
className={cn(
|
|
'text-xs font-normal',
|
|
hasOrders ? 'font-bold text-foreground' : 'text-muted-foreground',
|
|
)}
|
|
>
|
|
{hasOrders ? 'Есть записи' : 'Свободно'}
|
|
</span>
|
|
</div>
|
|
{slot?.state && getBadge(slot.state)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|