import { m } from '@/paraglide/messages';
import { CarrotIcon } from '@phosphor-icons/react';
import { createFileRoute } from '@tanstack/react-router';
import { Card, CardHeader, CardTitle } from '@ui/card';

export const Route = createFileRoute('/(app)/(auth)/kanri/items')({
  component: RouteComponent,
  staticData: { breadcrumb: () => m.nav_items() },
});

function RouteComponent() {
  return (
    <div className="@container/main flex flex-1 flex-col gap-2 p-4">
      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs">
        <Card>
          <CardHeader>
            <CardTitle className="text-xl flex items-center gap-2">
              <CarrotIcon size={24} />
              {m.items_page_ui_title()}
            </CardTitle>
          </CardHeader>
        </Card>
      </div>
    </div>
  );
}
