Skip to content

Commit d2dddc6

Browse files
felixerdyfelixerdy
committed
feat: dialog pages
1 parent 3643210 commit d2dddc6

File tree

42 files changed

+1160
-477
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1160
-477
lines changed

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
99
},
1010
"dependencies": {
1111
"@mdx-js/loader": "^3.0.0",
12-
"@mdx-js/react": "^3.0.0",
12+
"@mdx-js/react": "^3.0.1",
1313
"@next/mdx": "^14.1.0",
14+
"@radix-ui/react-dialog": "^1.0.5",
1415
"@radix-ui/react-dropdown-menu": "^2.0.6",
1516
"@radix-ui/react-slot": "^1.0.2",
1617
"@tsparticles/engine": "^3.2.1",
@@ -24,6 +25,7 @@
2425
"lucide-react": "^0.319.0",
2526
"mini-svg-data-uri": "^1.4.4",
2627
"next": "14.1.0",
28+
"next-mdx-remote": "^4.4.1",
2729
"react": "^18",
2830
"react-dom": "^18",
2931
"sharp": "^0.33.2",

‎src/app/[lng]/page-dialog.tsx

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { promises as fs } from "fs";
2+
import { BackgroundBeams } from "@/components/animated/beams";
3+
import { GlowingStarsBackgroundCard } from "@/components/animated/glowing-stars";
4+
import { Card } from "@/components/ui/card";
5+
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
6+
import { cn } from "@/lib/utils";
7+
import { useMDXComponents } from "@/mdx-components";
8+
import { compileMDX } from "next-mdx-remote/rsc";
9+
import { Suspense } from "react";
10+
11+
async function getData(content: string, lng = "de") {
12+
try {
13+
const file = await fs.readFile(
14+
`${process.cwd()}/src/content/${content}/${content}.${lng}.mdx`,
15+
"utf8",
16+
);
17+
if (!file) return { mdxSource: "" };
18+
return { mdxSource: file };
19+
} catch (error) {
20+
return { mdxSource: "" };
21+
}
22+
}
23+
24+
export default async function PageDialog({
25+
content,
26+
lng,
27+
animatedBackground,
28+
size,
29+
children,
30+
}: {
31+
content: string;
32+
lng: string;
33+
animatedBackground?:
34+
| "beams"
35+
| "glowing-stars"
36+
| "grid"
37+
| "background-gradient";
38+
size?: "normal" | "large";
39+
children: React.ReactNode;
40+
}) {
41+
const { mdxSource } = await getData(content, lng);
42+
43+
const { content: mdxContent, frontmatter } = await compileMDX<{
44+
title: string;
45+
}>({
46+
source: mdxSource,
47+
options: { parseFrontmatter: true },
48+
components: useMDXComponents({}),
49+
});
50+
51+
const Trigger = () => (
52+
<Card
53+
className={cn(
54+
size === "large" ? "col-span-2" : "col-span-1",
55+
"from-muted to-background/90",
56+
"bg-gradient-to-br w-full break-inside-avoid relative rounded-md overflow-hidden group cursor-pointer",
57+
)}
58+
>
59+
{animatedBackground === "beams" && (
60+
<BackgroundBeams className="group-hover:scale-105 transition-all" />
61+
)}
62+
{animatedBackground === "glowing-stars" && (
63+
<GlowingStarsBackgroundCard className="group-hover:scale-105 transition-all" />
64+
)}
65+
{animatedBackground === "grid" && (
66+
<div className="absolute top-0 left-0 w-full h-full group-hover:scale-105 transition-all">
67+
<div className="h-full w-full bg-transparent bg-grid-white/[0.2] relative flex items-center justify-center">
68+
<div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]" />
69+
</div>
70+
</div>
71+
)}
72+
73+
<div className="absolute top-0 left-0 w-full h-full p-4">{children}</div>
74+
</Card>
75+
);
76+
77+
return (
78+
<Dialog>
79+
<DialogTrigger asChild>
80+
<Trigger />
81+
</DialogTrigger>
82+
<DialogContent className="max-w-7xl rounded-lg max-h-[80vh] overflow-auto no-scrollbar">
83+
<Suspense fallback={"Loading..."}>{mdxContent}</Suspense>
84+
</DialogContent>
85+
</Dialog>
86+
);
87+
}

‎src/app/[lng]/page.tsx

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
import { i18n } from "@/components/pages/home/i18n";
2+
import H1 from "@/components/ui/typography/H1";
3+
import { redirect } from "next/navigation";
4+
import PageDialog from "./page-dialog";
5+
6+
export default async function Page({
7+
params,
8+
}: {
9+
params: { lng: "de" | "en" | "pt" };
10+
}) {
11+
if (!params.lng || !["de", "en", "pt"].includes(params.lng)) redirect("/de");
12+
13+
return (
14+
<div className="flex flex-col items-center w-full gap-12">
15+
<div className="max-w-6xl mx-auto w-full">
16+
<div className="grid md:auto-rows-[18rem] grid-cols-2 md:grid-cols-3 gap-4 max-w-7xl mx-auto auto-rows-[10rem]">
17+
<div className="h-full w-full col-span-2 bg-dot-fuchsia-400/50 relative flex items-center justify-center">
18+
<div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_45%,black)]" />
19+
<H1 className="bg-clip-text text-transparent bg-gradient-to-b from-muted-foreground to-foreground">
20+
Atrai Bikes
21+
</H1>
22+
</div>
23+
<PageDialog
24+
lng={params.lng}
25+
content="about"
26+
animatedBackground="beams"
27+
>
28+
<div className="absolute bottom-0 left-0 p-4">
29+
<h2 className="text-2xl font-bold">{i18n[params.lng].about}</h2>
30+
</div>
31+
</PageDialog>
32+
<PageDialog
33+
lng={params.lng}
34+
content="hardware"
35+
animatedBackground="glowing-stars"
36+
size="large"
37+
>
38+
<div className="absolute top-0 right-0 p-4">
39+
<h2 className="text-2xl font-bold">
40+
{i18n[params.lng].hardware}
41+
</h2>
42+
</div>
43+
</PageDialog>
44+
45+
<PageDialog
46+
lng={params.lng}
47+
content="partner"
48+
animatedBackground="grid"
49+
>
50+
<div className="absolute top-0 right-0 p-4">
51+
<h2 className="text-2xl font-bold">{i18n[params.lng].partner}</h2>
52+
</div>
53+
</PageDialog>
54+
55+
<PageDialog lng={params.lng} content="faq" animatedBackground="beams">
56+
<div className="absolute top-0 right-0 p-4">
57+
<h2 className="text-2xl font-bold">{i18n[params.lng].faq}</h2>
58+
</div>
59+
</PageDialog>
60+
61+
<PageDialog
62+
lng={params.lng}
63+
content="blog"
64+
animatedBackground="beams"
65+
>
66+
<div className="absolute top-0 right-0 p-4">
67+
<h2 className="text-2xl font-bold">{i18n[params.lng].blog}</h2>
68+
</div>
69+
</PageDialog>
70+
71+
<PageDialog
72+
lng={params.lng}
73+
content="results"
74+
animatedBackground="beams"
75+
>
76+
<div className="absolute top-0 right-0 p-4">
77+
<h2 className="text-2xl font-bold">{i18n[params.lng].results}</h2>
78+
</div>
79+
</PageDialog>
80+
81+
<PageDialog
82+
lng={params.lng}
83+
content="analytics"
84+
animatedBackground="beams"
85+
size="large"
86+
>
87+
<div className="absolute top-0 right-0 p-4">
88+
<h2 className="text-2xl font-bold">
89+
{i18n[params.lng].analytics}
90+
</h2>
91+
</div>
92+
</PageDialog>
93+
94+
{/* <BentoCard href={"/about"} animatedBackground="beams">
95+
<div className="absolute bottom-0 left-0 p-4">
96+
<h2 className="text-2xl font-bold">{i18n[lng].about}</h2>
97+
</div>
98+
</BentoCard>
99+
<BentoCard
100+
href={"/analytics"}
101+
image={DataAnalyticsImage}
102+
size="large"
103+
>
104+
<h2 className="text-2xl font-bold">{i18n[lng].analytics}</h2>
105+
</BentoCard>
106+
<BentoCard href={"/results"} animatedBackground="glowing-stars">
107+
<h2 className="text-2xl font-bold">{i18n[lng].results}</h2>
108+
</BentoCard>
109+
<BentoCard href={"/blog"} animatedBackground="grid">
110+
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center p-4">
111+
<h2 className="text-2xl font-bold">{i18n[lng].blog}</h2>
112+
</div>
113+
</BentoCard>
114+
<BentoCard size="large" image={HardwareImage} href={"/hardware"}>
115+
<div className="absolute top-0 right-0 p-4">
116+
<h2 className="text-2xl font-bold">{i18n[lng].hardware}</h2>
117+
</div>
118+
</BentoCard>
119+
120+
<BentoCard href={"/partner"} size="large" animatedBackground="beams">
121+
<div className="w-full h-full flex flex-col">
122+
<h2 className="text-2xl font-bold">{i18n[lng].partner}</h2>
123+
<div className="w-full h-full flex items-center justify-around group-hover:scale-105 transition-all">
124+
<div className="relative h-full aspect-square ">
125+
<Image
126+
src={ICImage}
127+
alt="Instituto Cordial"
128+
fill
129+
className="object-contain"
130+
/>
131+
</div>
132+
<div className="relative h-full aspect-square">
133+
<Image
134+
src={ReeduImage}
135+
alt="Reedu"
136+
fill
137+
className="object-contain"
138+
/>
139+
</div>
140+
141+
<div className="relative h-full aspect-square">
142+
<Image
143+
src={Image52N}
144+
alt="52n"
145+
fill
146+
className="object-contain"
147+
/>
148+
</div>
149+
</div>
150+
</div>
151+
</BentoCard>
152+
<BentoCard href={"/faq"} animatedBackground="glowing-stars">
153+
<h2 className="text-2xl font-bold">{i18n[lng].faq}</h2>
154+
</BentoCard> */}
155+
</div>
156+
</div>
157+
</div>
158+
);
159+
// return <Home />;
160+
}

‎src/app/de/(pages)/analytics/page.mdx

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎src/app/de/(pages)/blog/page.mdx

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎src/app/de/(pages)/faq/page.mdx

Lines changed: 0 additions & 31 deletions
This file was deleted.

0 commit comments

Comments
 (0)