64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
/* eslint-disable canonical/id-match */
|
|
'use client';
|
|
|
|
import { ReadonlyTimeRange } from '@/components/shared/time-range';
|
|
import { useSlotQuery } from '@/hooks/api/slots';
|
|
import { Enum_Slot_State, type SlotFieldsFragment } from '@repo/graphql/types';
|
|
import { Badge } from '@repo/ui/components/ui/badge';
|
|
import { cn } from '@repo/ui/lib/utils';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
const MAP_BADGE_TEXT: Record<Enum_Slot_State, string> = {
|
|
closed: 'Закрыто',
|
|
open: 'Открыто',
|
|
reserved: 'Зарезервировано',
|
|
};
|
|
|
|
export function SlotCard(props: Readonly<SlotFieldsFragment>) {
|
|
const pathname = usePathname();
|
|
const { documentId } = props;
|
|
|
|
const { data: { slot } = {} } = useSlotQuery({ documentId });
|
|
|
|
const ordersNumber = slot?.orders?.length;
|
|
const hasOrders = Boolean(ordersNumber);
|
|
|
|
const isOpened = props?.state === Enum_Slot_State.Open;
|
|
const isClosed = props?.state === Enum_Slot_State.Closed;
|
|
|
|
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>
|
|
{props.state && (
|
|
<Badge
|
|
className={cn(
|
|
isOpened ? 'bg-green-100 text-green-500 dark:bg-green-700 dark:text-green-100' : '',
|
|
isClosed ? 'bg-red-100 text-red-500 dark:bg-red-700 dark:text-red-100' : '',
|
|
)}
|
|
>
|
|
{getBadgeText(props.state)}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
function getBadgeText(state: Enum_Slot_State) {
|
|
if (!state) return '';
|
|
|
|
return MAP_BADGE_TEXT[state];
|
|
}
|