Skip to content

Commit 5c0b03f

Browse files
Jaromír TrnkaJaromír Trnka
Jaromír Trnka
authored and
Jaromír Trnka
committed
suspense and LDRS
1 parent ac4f641 commit 5c0b03f

File tree

4 files changed

+149
-52
lines changed

4 files changed

+149
-52
lines changed

‎bun.lockb

336 Bytes
Binary file not shown.

‎package.json

Lines changed: 43 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,45 @@
11
{
2-
"name": "smartcookdes",
3-
"module": "index.ts",
4-
"type": "module",
5-
"scripts": {
6-
"dev": "bun --bun astro dev",
7-
"check": "bun --bun astro check"
8-
},
9-
"devDependencies": {
10-
"@types/bun": "latest",
11-
"prettier": "^3.2.2",
12-
"prettier-plugin-astro": "^0.12.3",
13-
"prettier-plugin-tailwindcss": "^0.5.11"
14-
},
15-
"peerDependencies": {
16-
"typescript": "^5.0.0"
17-
},
18-
"dependencies": {
19-
"@astrojs/check": "^0.4.1",
20-
"@astrojs/react": "^3.0.9",
21-
"@astrojs/tailwind": "^5.1.0",
22-
"@radix-ui/react-accordion": "^1.1.2",
23-
"@radix-ui/react-avatar": "^1.0.4",
24-
"@radix-ui/react-checkbox": "^1.0.4",
25-
"@radix-ui/react-dialog": "^1.0.5",
26-
"@radix-ui/react-dropdown-menu": "^2.0.6",
27-
"@radix-ui/react-icons": "^1.3.0",
28-
"@radix-ui/react-label": "^2.0.2",
29-
"@radix-ui/react-radio-group": "^1.1.3",
30-
"@radix-ui/react-separator": "^1.0.3",
31-
"@radix-ui/react-slot": "^1.0.2",
32-
"astro": "^4.1.2",
33-
"class-variance-authority": "^0.7.0",
34-
"clsx": "^2.1.0",
35-
"embla-carousel-react": "^8.0.0-rc21",
36-
"lucide-react": "^0.309.0",
37-
"react": "^18.2.0",
38-
"react-dom": "^18.2.0",
39-
"tailwind-merge": "^2.2.0",
40-
"tailwindcss": "^3.4.1",
41-
"tailwindcss-animate": "^1.0.7",
42-
"typescript": "^5.3.3"
43-
}
2+
"name": "smartcookdes",
3+
"module": "index.ts",
4+
"type": "module",
5+
"scripts": {
6+
"dev": "bun --bun astro dev",
7+
"check": "bun --bun astro check"
8+
},
9+
"devDependencies": {
10+
"@types/bun": "latest",
11+
"prettier": "^3.2.2",
12+
"prettier-plugin-astro": "^0.12.3",
13+
"prettier-plugin-tailwindcss": "^0.5.11"
14+
},
15+
"peerDependencies": {
16+
"typescript": "^5.0.0"
17+
},
18+
"dependencies": {
19+
"@astrojs/check": "^0.4.1",
20+
"@astrojs/react": "^3.0.9",
21+
"@astrojs/tailwind": "^5.1.0",
22+
"@radix-ui/react-accordion": "^1.1.2",
23+
"@radix-ui/react-avatar": "^1.0.4",
24+
"@radix-ui/react-checkbox": "^1.0.4",
25+
"@radix-ui/react-dialog": "^1.0.5",
26+
"@radix-ui/react-dropdown-menu": "^2.0.6",
27+
"@radix-ui/react-icons": "^1.3.0",
28+
"@radix-ui/react-label": "^2.0.2",
29+
"@radix-ui/react-radio-group": "^1.1.3",
30+
"@radix-ui/react-separator": "^1.0.3",
31+
"@radix-ui/react-slot": "^1.0.2",
32+
"astro": "^4.1.2",
33+
"class-variance-authority": "^0.7.0",
34+
"clsx": "^2.1.0",
35+
"embla-carousel-react": "^8.0.0-rc21",
36+
"ldrs": "^1.0.1",
37+
"lucide-react": "^0.309.0",
38+
"react": "^18.2.0",
39+
"react-dom": "^18.2.0",
40+
"tailwind-merge": "^2.2.0",
41+
"tailwindcss": "^3.4.1",
42+
"tailwindcss-animate": "^1.0.7",
43+
"typescript": "^5.3.3"
44+
}
4445
}

‎src/components/Loading.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { zoomies } from "ldrs";
2+
3+
zoomies.register();
4+
5+
export default function Loader() {
6+
return (
7+
<div className="bg-page justifybg-center flex min-h-[100svh] w-full items-center">
8+
<l-zoomies size="80" stroke="5" bg-opacity="0.1" speed="1.4" color="black"></l-zoomies>
9+
</div>
10+
);
11+
}

‎src/components/recipes/Recipes.tsx

Lines changed: 95 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
22
import { Button } from "@/components/ui/button";
33
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
44
import { Badge } from "@/components/ui/badge";
5-
65
import {
76
priceToName,
87
difficultyToName,
@@ -11,10 +10,12 @@ import {
1110
} from "../../pages/recipes/translateObjectToNames";
1211
import Filters from "./Filters";
1312
import { Separator } from "@/components/ui/separator";
13+
import { Suspense } from "react";
14+
import Loader from "../Loading.tsx";
1415

1516
export default function Recipes() {
1617
return (
17-
<>
18+
<Suspense fallback={<Loader />}>
1819
<h2 className="mt-8 scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">Recipes</h2>
1920

2021
<Filters />
@@ -27,35 +28,119 @@ export default function Recipes() {
2728
<CardHeader>
2829
<div className="flex flex-wrap gap-2">
2930
{recipe.tolerance.includes(2) && (
30-
<Badge variant="default" className="w-fit">
31+
<Badge variant="default" className="w-fit gap-2">
32+
<svg
33+
xmlns="http://www.w3.org/2000/svg"
34+
viewBox="0 0 24 24"
35+
strokeLinecap="round"
36+
strokeLinejoin="round"
37+
className="lucide lucide-vegan w-4 fill-none stroke-current stroke-2"
38+
>
39+
<path d="M2 2a26.6 26.6 0 0 1 10 20c.9-6.82 1.5-9.5 4-14" />
40+
<path d="M16 8c4 0 6-2 6-6-4 0-6 2-6 6" />
41+
<path d="M17.41 3.6a10 10 0 1 0 3 3" />
42+
</svg>
3143
Vegan
3244
</Badge>
3345
)}
3446
{recipe.tolerance.includes(1) && !recipe.tolerance.includes(2) && (
35-
<Badge variant="secondary" className="w-fit">
47+
<Badge variant="secondary" className="w-fit gap-2">
48+
<svg
49+
xmlns="http://www.w3.org/2000/svg"
50+
viewBox="0 0 24 24"
51+
strokeLinecap="round"
52+
strokeLinejoin="round"
53+
className="lucide lucide-salad w-4 fill-none stroke-current stroke-2"
54+
>
55+
<path d="M7 21h10" />
56+
<path d="M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z" />
57+
<path d="M11.38 12a2.4 2.4 0 0 1-.4-4.77 2.4 2.4 0 0 1 3.2-2.77 2.4 2.4 0 0 1 3.47-.63 2.4 2.4 0 0 1 3.37 3.37 2.4 2.4 0 0 1-1.1 3.7 2.51 2.51 0 0 1 .03 1.1" />
58+
<path d="m13 12 4-4" />
59+
<path d="M10.9 7.25A3.99 3.99 0 0 0 4 10c0 .73.2 1.41.54 2" />
60+
</svg>
3661
Vegeterian
3762
</Badge>
3863
)}
3964
{!recipe.tolerance.includes(1) && !recipe.tolerance.includes(2) && (
40-
<Badge variant="outline" className="w-fit">
65+
<Badge variant="outline" className="w-fit gap-2">
66+
<svg
67+
xmlns="http://www.w3.org/2000/svg"
68+
viewBox="0 0 24 24"
69+
strokeLinecap="round"
70+
strokeLinejoin="round"
71+
className="lucide lucide-beef w-4 fill-none stroke-current stroke-2"
72+
>
73+
<circle cx="12.5" cy="8.5" r="2.5" />
74+
<path d="M12.5 2a6.5 6.5 0 0 0-6.22 4.6c-1.1 3.13-.78 3.9-3.18 6.08A3 3 0 0 0 5 18c4 0 8.4-1.8 11.4-4.3A6.5 6.5 0 0 0 12.5 2Z" />
75+
<path d="m18.5 6 2.19 4.5a6.48 6.48 0 0 1 .31 2 6.49 6.49 0 0 1-2.6 5.2C15.4 20.2 11 22 7 22a3 3 0 0 1-2.68-1.66L2.4 16.5" />
76+
</svg>
4177
Meat
4278
</Badge>
4379
)}
4480

4581
{recipe.price && (
46-
<Badge variant="outline" className="w-fit capitalize">
82+
<Badge
83+
variant="outline"
84+
className="w-fit gap-2 capitalize text-muted-foreground"
85+
>
86+
<svg
87+
xmlns="http://www.w3.org/2000/svg"
88+
viewBox="0 0 24 24"
89+
strokeLinecap="round"
90+
strokeLinejoin="round"
91+
className="lucide lucide-coins w-4 fill-none stroke-current stroke-2"
92+
>
93+
<circle cx="8" cy="8" r="6" />
94+
<path d="M18.09 10.37A6 6 0 1 1 10.34 18" />
95+
<path d="M7 6h1v4" />
96+
<path d="m16.71 13.88.7.71-2.82 2.82" />
97+
</svg>
4798
{priceToName(recipe.price)}
4899
</Badge>
49100
)}
50101

51102
{recipe.difficulty && (
52-
<Badge variant="outline" className="w-fit capitalize">
103+
<Badge
104+
variant="outline"
105+
className="w-fit gap-2 capitalize text-muted-foreground"
106+
>
107+
<svg
108+
xmlns="http://www.w3.org/2000/svg"
109+
viewBox="0 0 24 24"
110+
strokeLinecap="round"
111+
strokeLinejoin="round"
112+
className="lucide lucide-construction w-4 fill-none stroke-current stroke-2"
113+
>
114+
<rect x="2" y="6" width="20" height="8" rx="1" />
115+
<path d="M17 14v7" />
116+
<path d="M7 14v7" />
117+
<path d="M17 3v3" />
118+
<path d="M7 3v3" />
119+
<path d="M10 14 2.3 6.3" />
120+
<path d="m14 6 7.7 7.7" />
121+
<path d="m8 6 8 8" />
122+
</svg>
53123
{difficultyToName(recipe.difficulty)}
54124
</Badge>
55125
)}
56126

57127
{recipe.country && (
58-
<Badge variant="outline" className="w-fit uppercase">
128+
<Badge
129+
variant="outline"
130+
className="w-fit gap-2 uppercase text-muted-foreground"
131+
>
132+
<svg
133+
xmlns="http://www.w3.org/2000/svg"
134+
viewBox="0 0 24 24"
135+
strokeLinecap="round"
136+
strokeLinejoin="round"
137+
className="lucide lucide-globe-2 w-4 fill-none stroke-current stroke-2"
138+
>
139+
<path d="M21.54 15H17a2 2 0 0 0-2 2v4.54" />
140+
<path d="M7 3.34V5a3 3 0 0 0 3 3v0a2 2 0 0 1 2 2v0c0 1.1.9 2 2 2v0a2 2 0 0 0 2-2v0c0-1.1.9-2 2-2h3.17" />
141+
<path d="M11 21.95V18a2 2 0 0 0-2-2v0a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05" />
142+
<circle cx="12" cy="12" r="10" />
143+
</svg>
59144
{recipe.country}
60145
</Badge>
61146
)}
@@ -69,7 +154,7 @@ export default function Recipes() {
69154
</CardHeader>
70155
<CardContent className="grid gap-1">
71156
{recipe.duration && (
72-
<div className="flex gap-2">
157+
<div className="flex items-center gap-2">
73158
<small className="flex items-center gap-1 text-sm font-medium leading-none">
74159
<svg
75160
xmlns="http://www.w3.org/2000/svg"
@@ -165,7 +250,7 @@ export default function Recipes() {
165250
);
166251
})}
167252
</div>
168-
</>
253+
</Suspense>
169254
);
170255
}
171256

0 commit comments

Comments
 (0)