Files
medreport_mrb2b/app/home/(user)/_components/booking/time-slots.tsx

97 lines
2.6 KiB
TypeScript

import React from 'react';
import { formatCurrency } from '@/packages/shared/src/utils';
import { format } from 'date-fns';
import { Button } from '@kit/ui/shadcn/button';
import { Card } from '@kit/ui/shadcn/card';
import { Trans } from '@kit/ui/trans';
import { AvailableAppointmentsResponse } from '~/lib/types/connected-online';
const dummyData: AvailableAppointmentsResponse['Data']['T_Booking'] = [
{
ServiceID: 1,
StartTime: new Date('2024-10-10T10:00:00Z'),
EndTime: new Date('2024-10-10T11:00:00Z'),
HKServiceID: 0,
ClinicID: '',
LocationID: 0,
UserID: 0,
SyncUserID: 0,
PayorCode: '',
},
{
ServiceID: 1,
StartTime: new Date('2024-10-10T11:00:00Z'),
EndTime: new Date('2024-10-10T12:00:00Z'),
HKServiceID: 0,
ClinicID: '',
LocationID: 0,
UserID: 0,
SyncUserID: 0,
PayorCode: '',
},
{
ServiceID: 2,
StartTime: new Date('2024-10-10T12:00:00Z'),
EndTime: new Date('2024-10-10T13:00:00Z'),
HKServiceID: 0,
ClinicID: '',
LocationID: 0,
UserID: 0,
SyncUserID: 0,
PayorCode: '',
},
];
const TimeSlots = () => {
return (
<div className="flex w-full flex-col gap-2">
{dummyData.map((data) => (
<Card
className="flex justify-between p-4"
key={data.ServiceID + '-time-slot'}
>
<div>
<span>{format(data.StartTime.toString(), 'HH:mm')}</span>
<div className="flex">
<h5 className="after:mx-2 after:content-['·']">
Dr. Jüri Mardikas
</h5>
<span className="after:mx-2 after:content-['·']">Kardioloog</span>
<span>Tervisekassa aeg</span>
</div>
<div className="flex text-xs">
<span className="after:mx-2 after:content-['·']">
Ülemiste Tervisemaja 2
</span>
<span className="after:mx-2 after:content-['·']">
Ülemiste füsioteraapiakliinik
</span>
<span className="after:mx-2 after:content-['·']">
Sepapaja 2/1
</span>
<span>Tallinn</span>
</div>
</div>
<div className="flex-end flex items-center justify-center gap-2">
<span className="text-sm font-semibold">
{formatCurrency({
currencyCode: 'EUR',
locale: 'et-EE',
value: 20,
})}
</span>
<Button>
<Trans i18nKey="Broneeri" />
</Button>
</div>
</Card>
))}
</div>
);
};
export default TimeSlots;