+21

apps/web/src/routes/_.(app)/recipes/$author/$rkey/index.lazy.tsx

reviewed

··· 13 13 import { recipeQueryOptions } from '@/queries/recipe' 14 14 import { useSuspenseQuery } from '@tanstack/react-query' 15 15 import { useXrpc } from '@/hooks/use-xrpc' 16 16 + import { Badge } from '@/components/ui/badge' 17 17 + import { Clock, Users } from 'lucide-react' 16 18 17 19 export const Route = createLazyFileRoute('/_/(app)/recipes/$author/$rkey/')({ 18 20 component: RouteComponent, ··· 64 66 </div> 65 67 </header> 66 68 <div className="flex flex-col gap-4 px-4 py-8 items-center max-w-2xl w-full mx-auto"> 69 69 + <div className="relative h-48 w-full"> 70 70 + <img 71 71 + src={"https://www.foodandwine.com/thmb/fjNakOY7IcuvZac1hR3JcSo7vzI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/FAW-recipes-pasta-sausage-basil-and-mustard-hero-06-cfd1c0a2989e474ea7e574a38182bbee.jpg"} 72 72 + alt={recipe.title} 73 73 + className="h-full w-full object-cover rounded-xl shadow-card" 74 74 + /> 75 75 + </div> 76 76 + 67 77 <p className="text-muted-foreground"> 68 78 By {recipe.author.displayName} 69 79 </p> 70 80 <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"> 71 81 {recipe.title} 72 82 </h1> 83 83 + <div className="flex items-center gap-4"> 84 84 + <Badge className="flex items-center gap-2"> 85 85 + <Clock className="size-4" /> 86 86 + <span>{recipe.time} mins</span> 87 87 + </Badge> 88 88 + 89 89 + <Badge className="flex items-center gap-2"> 90 90 + <Users className="size-4" /> 91 91 + <span>Serves 2</span> 92 92 + </Badge> 93 93 + </div> 73 94 <p className="leading-7 text-center"> 74 95 {recipe.description} 75 96 </p>

-1

apps/web/src/routes/_.(app)/recipes/new.tsx

reviewed

··· 41 41 import { Label } from "@/components/ui/label"; 42 42 import { TrashIcon } from "lucide-react"; 43 43 import { useNewRecipeMutation } from "@/queries/recipe"; 44 44 - import { useState } from "react"; 45 44 46 45 export const Route = createFileRoute("/_/(app)/recipes/new")({ 47 46 beforeLoad: async ({ context }) => {