64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
import TableFilter from '@/components/table/table-filter';
|
|
import TableFooter from '@/components/table/table-footer';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card } from '@/components/ui/card';
|
|
import LandingLayout from '@/layouts/landing-layout';
|
|
import { cn } from '@/lib/utils';
|
|
import { Link, router } from '@inertiajs/react';
|
|
import { format, formatDistanceToNow } from 'date-fns';
|
|
import { ReactNode } from 'react';
|
|
|
|
const Index = ({ notifications, translate }: { notifications: Pagination<Notification>; translate: any }) => {
|
|
const { button, frontend } = translate;
|
|
|
|
return (
|
|
<div className="container mx-auto max-w-2xl py-12">
|
|
<div className="flex items-start justify-between gap-4 pb-5 md:pb-6">
|
|
<TableFilter
|
|
data={notifications}
|
|
title={frontend.notification_list}
|
|
globalSearch={false}
|
|
tablePageSizes={[10, 15, 20, 25]}
|
|
routeName="notifications.index"
|
|
className="w-full p-0 md:p-0"
|
|
/>
|
|
{notifications.total > 0 && (
|
|
<Button variant="outline" onClick={() => router.put(route('notifications.mark-all-as-read'))}>
|
|
{button.mark_all_as_read}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<Card className="flex flex-col divide-y">
|
|
{notifications.data.length > 0 ? (
|
|
notifications.data.map(({ id, data, created_at }) => {
|
|
const time = formatDistanceToNow(new Date(created_at), { addSuffix: true });
|
|
const timeText = time.slice(0, 1).toUpperCase() + time.slice(1);
|
|
|
|
return (
|
|
<Link
|
|
key={id}
|
|
href={route('notifications.show', id)}
|
|
className={cn('hover:bg-accent/50 flex flex-col gap-1 px-4 py-2 transition-colors')}
|
|
>
|
|
<p className="text-sm font-medium capitalize">{data.title}</p>
|
|
<span className="text-muted-foreground text-xs" title={format(new Date(created_at), 'PPpp')}>
|
|
{timeText}
|
|
</span>
|
|
</Link>
|
|
);
|
|
})
|
|
) : (
|
|
<p className="text-muted-foreground p-6 text-center text-sm">{frontend.no_unread_notifications}</p>
|
|
)}
|
|
</Card>
|
|
|
|
<TableFooter className="mt-1 p-5 sm:p-7" routeName="notifications.index" paginationInfo={notifications} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Index.layout = (page: ReactNode) => <LandingLayout children={page} customizable={false} />;
|
|
|
|
export default Index;
|