slot-datetime: use ReadonlyTimeRange

apps/web/app/(main)/slots/[documentId]/page.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@/components/layout';
 import { PageHeader } from '@/components/navigation';
-import { DateTimeCard, SlotButtons } from '@/components/schedule';
+import { SlotButtons, SlotDateTime } from '@/components/schedule';
 import { OrdersList } from '@/components/schedule/orders-list';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
@@ -15,7 +15,7 @@ export default async function ProfilePage(props: Readonly<Props>) {
     <HydrationBoundary state={dehydrate(queryClient)}>
       <PageHeader title={undefined} />
       <Container>
-        <DateTimeCard {...parameters} />
+        <SlotDateTime {...parameters} />
         <SlotButtons {...parameters} />
       </Container>
       <OrdersList {...parameters} className="mt-4" />

apps/web/components/schedule/add-slot-form.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable canonical/id-match */
 'use client';
-import { AddTimePair } from './components/time-pair';
+import { AddTimeRange } from './components/time-range';
 import { Context, ContextProvider } from './context';
 import { ScheduleSlotsContext } from '@/context/schedule-slots';
 import { useSlotAdd } from '@/hooks/slots';
@@ -35,7 +35,7 @@ export const AddSlotForm = withContext(ContextProvider)(function () {
   return (
     <div className="px-4">
       <form className="grid grid-cols-[1fr_1fr_auto] items-center gap-2" onSubmit={handleSubmit}>
-        <AddTimePair />
+        <AddTimeRange />
         <Button className="rounded-full" type="submit">
           <PlusSquare className="mr-1 size-4" />
           Добавить

apps/web/components/schedule/components/order-card.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable canonical/id-match */
 'use client';
 import { type OrderClient, type OrderComponentProps } from '../types';
-import { ReadonlyTimeRange } from './time-pair';
+import { ReadonlyTimeRange } from './time-range';
 import { useOrderQuery } from '@/hooks/orders';
 import { Enum_Order_State } from '@repo/graphql/types';
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';

apps/web/components/schedule/components/slot-card.tsx

@@ -2,7 +2,7 @@
 'use client';
 import { ContextProvider } from '../context';
 import { type SlotComponentProps } from '../types';
-import { ReadonlyTimeRange } from './time-pair';
+import { ReadonlyTimeRange } from './time-range';
 import { useSlotQuery } from '@/hooks/slots';
 import { withContext } from '@/utils/context';
 import { Enum_Slot_State } from '@repo/graphql/types';

apps/web/components/schedule/components/slot-date.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { type SlotComponentProps } from '../types';
+import { useSlotQuery } from '@/hooks/slots';
+import { formatDate } from '@/utils/date';
+
+export function SlotDate({ documentId }: Readonly<SlotComponentProps>) {
+  const { data } = useSlotQuery({ documentId });
+  const slot = data?.data?.slot;
+
+  if (!slot) return null;
+
+  return (
+    <span className="mb-2 text-sm tracking-wide text-muted-foreground">
+      {formatDate(slot?.date).user()}
+    </span>
+  );
+}

apps/web/components/schedule/components/time-range.tsx

@@ -1,59 +1,28 @@
 'use client';
-import { Context, type ContextType } from '../context';
+import { Context } from '../context';
 import { useSlotAdd } from '@/hooks/slots';
 import { formatTime } from '@/utils/date';
 import { Input } from '@repo/ui/components/ui/input';
 import { cn } from '@repo/ui/lib/utils';
 import { use } from 'react';
 
-type TimePairProps = Pick<ContextType, 'endTime' | 'setEndTime' | 'setStartTime' | 'startTime'> & {
-  readonly disabled?: boolean;
-};
-
 type TimeRangeProps = {
   readonly className?: string;
+  readonly delimiter?: boolean;
   readonly time_end: string;
   readonly time_start: string;
 };
 
-export function AddTimePair() {
+export function AddTimeRange() {
   const { endTime, setEndTime, setStartTime, startTime } = use(Context);
   const { isPending } = useSlotAdd();
 
-  return (
-    <TimeInputPair
-      disabled={isPending}
-      endTime={endTime}
-      setEndTime={setEndTime}
-      setStartTime={setStartTime}
-      startTime={startTime}
-    />
-  );
-}
-
-export function ReadonlyTimeRange({ className, time_end, time_start }: Readonly<TimeRangeProps>) {
-  return (
-    <div className={cn('flex flex-row items-center gap-2 text-lg font-bold', className)}>
-      <span className="tracking-wider">{formatTime(time_start).user()}</span>
-      {' - '}
-      <span className="tracking-wider">{formatTime(time_end).user()}</span>
-    </div>
-  );
-}
-
-function TimeInputPair({
-  disabled = false,
-  endTime,
-  setEndTime,
-  setStartTime,
-  startTime,
-}: TimePairProps) {
   return (
     <>
       <div className="flex-1">
         <Input
           className="rounded-xl"
-          disabled={disabled}
+          disabled={isPending}
           id="start-time"
           onChange={(event) => setStartTime?.(event.target.value)}
           required
@@ -64,7 +33,7 @@ function TimeInputPair({
       <div className="flex-1">
         <Input
           className="rounded-xl"
-          disabled={disabled}
+          disabled={isPending}
           id="end-time"
           onChange={(event) => setEndTime?.(event.target.value)}
           required
@@ -75,3 +44,18 @@ function TimeInputPair({
     </>
   );
 }
+
+export function ReadonlyTimeRange({
+  className,
+  delimiter = true,
+  time_end,
+  time_start,
+}: Readonly<TimeRangeProps>) {
+  return (
+    <div className={cn('flex flex-row items-center gap-2 text-lg font-bold', className)}>
+      <span className="tracking-wider">{formatTime(time_start).user()}</span>
+      {delimiter && ' - '}
+      <span className="tracking-wider">{formatTime(time_end).user()}</span>
+    </div>
+  );
+}

apps/web/components/schedule/datetime-card.tsx

@@ -1,23 +0,0 @@
-'use client';
-import { type SlotComponentProps } from './types';
-import { useSlotQuery } from '@/hooks/slots';
-import { formatDate, formatTime } from '@/utils/date';
-
-export function DateTimeCard({ documentId }: Readonly<SlotComponentProps>) {
-  const { data } = useSlotQuery({ documentId });
-  const slot = data?.data?.slot;
-
-  if (!slot) return null;
-
-  return (
-    <div className="flex flex-col gap-2">
-      <span className="mb-2 text-sm tracking-wide text-muted-foreground">
-        {formatDate(slot?.date).user()}
-      </span>
-      <span className="text-3xl font-bold tracking-wide">
-        {formatTime(slot?.time_start).user()}
-      </span>
-      <span className="text-3xl font-bold tracking-wide">{formatTime(slot?.time_end).user()}</span>
-    </div>
-  );
-}

apps/web/components/schedule/index.ts

@@ -1,5 +1,5 @@
 export * from './add-slot-form';
 export * from './calendar';
-export * from './datetime-card';
 export * from './slot-buttons';
+export * from './slot-datetime';
 export * from './slots-list';

apps/web/components/schedule/slot-datetime.tsx

@@ -0,0 +1,19 @@
+'use client';
+import { SlotDate } from './components/slot-date';
+import { ReadonlyTimeRange } from './components/time-range';
+import { type SlotComponentProps } from './types';
+import { useSlotQuery } from '@/hooks/slots';
+
+export function SlotDateTime(props: Readonly<SlotComponentProps>) {
+  const { data } = useSlotQuery(props);
+  const slot = data?.data?.slot;
+
+  if (!slot) return null;
+
+  return (
+    <div className="flex flex-col">
+      <SlotDate {...props} />
+      <ReadonlyTimeRange {...slot} className="text-3xl" />
+    </div>
+  );
+}