roost.moe
The recipes.blue monorepo
recipes.blue
recipes
appview
atproto
1import { Link, createFileRoute, Outlet } from '@tanstack/react-router'
2import { Button } from '@/components/ui/button'
3import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
4import { SidebarTrigger } from '@/components/ui/sidebar'
5
6export const Route = createFileRoute('/_')({
7 component: RouteComponent,
8 errorComponent: ({ error }) => {
9 return (
10 <>
11 <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
12 <div className="flex items-center gap-2 px-4">
13 <SidebarTrigger className="-ml-1" />
14 </div>
15 </header>
16 <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
17 <Card className="m-auto max-w-sm">
18 <CardHeader>
19 <CardTitle>Error!</CardTitle>
20 </CardHeader>
21 <CardContent>
22 {error.message}
23 </CardContent>
24 <CardFooter>
25 <Button asChild>
26 <Link to="/">Go home</Link>
27 </Button>
28 </CardFooter>
29 </Card>
30 </div>
31 </>
32 );
33 },
34
35 notFoundComponent: () => {
36 return (
37 <>
38 <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
39 <div className="flex items-center gap-2 px-4">
40 <SidebarTrigger className="-ml-1" />
41 </div>
42 </header>
43 <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
44 <Card className="m-auto max-w-sm">
45 <CardHeader>
46 <CardTitle>Not found</CardTitle>
47 </CardHeader>
48 <CardContent>
49 {"The page you tried to view doesn't exist."}
50 </CardContent>
51 <CardFooter>
52 <Button asChild>
53 <Link to="/">Go home</Link>
54 </Button>
55 </CardFooter>
56 </Card>
57 </div>
58 </>
59 );
60 },
61
62})
63
64function RouteComponent() {
65 return (
66 <>
67 <Outlet />
68 </>
69 )
70}