Skip to content

Commit

Permalink
feat: dialog pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@felixerdy
felixerdy committed May 3, 2024
1 parent 3643210 commit d2dddc6
Show file tree
Hide file tree
Showing 42 changed files with 1,160 additions and 477 deletions.
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@
},
"dependencies": {
"@mdx-js/loader": "^3.0.0",
"@mdx-js/react": "^3.0.0",
"@mdx-js/react": "^3.0.1",
"@next/mdx": "^14.1.0",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-slot": "^1.0.2",
"@tsparticles/engine": "^3.2.1",
Expand All @@ -24,6 +25,7 @@
"lucide-react": "^0.319.0",
"mini-svg-data-uri": "^1.4.4",
"next": "14.1.0",
"next-mdx-remote": "^4.4.1",
"react": "^18",
"react-dom": "^18",
"sharp": "^0.33.2",
Expand Down
87 changes: 87 additions & 0 deletions src/app/[lng]/page-dialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import { promises as fs } from "fs";

Check failure on line 1 in src/app/[lng]/page-dialog.tsx

View workflow job for this annotation

GitHub Actions / quality 

A Node.js builtin module should be imported with the node: protocol.

Check failure on line 1 in src/app/[lng]/page-dialog.tsx

View workflow job for this annotation

GitHub Actions / quality 

A Node.js builtin module should be imported with the node: protocol.
import { BackgroundBeams } from "@/components/animated/beams";
import { GlowingStarsBackgroundCard } from "@/components/animated/glowing-stars";
import { Card } from "@/components/ui/card";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { cn } from "@/lib/utils";
import { useMDXComponents } from "@/mdx-components";
import { compileMDX } from "next-mdx-remote/rsc";
import { Suspense } from "react";

async function getData(content: string, lng = "de") {
try {
const file = await fs.readFile(
`${process.cwd()}/src/content/${content}/${content}.${lng}.mdx`,
"utf8",
);
if (!file) return { mdxSource: "" };
return { mdxSource: file };
} catch (error) {
return { mdxSource: "" };
}
}

export default async function PageDialog({
content,
lng,
animatedBackground,
size,
children,
}: {
content: string;
lng: string;
animatedBackground?:
| "beams"
| "glowing-stars"
| "grid"
| "background-gradient";
size?: "normal" | "large";
children: React.ReactNode;
}) {
const { mdxSource } = await getData(content, lng);

const { content: mdxContent, frontmatter } = await compileMDX<{
title: string;
}>({
source: mdxSource,
options: { parseFrontmatter: true },
components: useMDXComponents({}),
});

const Trigger = () => (
<Card
className={cn(
size === "large" ? "col-span-2" : "col-span-1",
"from-muted to-background/90",
"bg-gradient-to-br w-full break-inside-avoid relative rounded-md overflow-hidden group cursor-pointer",
)}
>
{animatedBackground === "beams" && (
<BackgroundBeams className="group-hover:scale-105 transition-all" />
)}
{animatedBackground === "glowing-stars" && (
<GlowingStarsBackgroundCard className="group-hover:scale-105 transition-all" />
)}
{animatedBackground === "grid" && (
<div className="absolute top-0 left-0 w-full h-full group-hover:scale-105 transition-all">
<div className="h-full w-full bg-transparent bg-grid-white/[0.2] relative flex items-center justify-center">
<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)]" />
</div>
</div>
)}

<div className="absolute top-0 left-0 w-full h-full p-4">{children}</div>
</Card>
);

return (
<Dialog>
<DialogTrigger asChild>
<Trigger />
</DialogTrigger>
<DialogContent className="max-w-7xl rounded-lg max-h-[80vh] overflow-auto no-scrollbar">
<Suspense fallback={"Loading..."}>{mdxContent}</Suspense>
</DialogContent>
</Dialog>
);
}
160 changes: 160 additions & 0 deletions src/app/[lng]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
import { i18n } from "@/components/pages/home/i18n";
import H1 from "@/components/ui/typography/H1";
import { redirect } from "next/navigation";
import PageDialog from "./page-dialog";

export default async function Page({
params,
}: {
params: { lng: "de" | "en" | "pt" };
}) {
if (!params.lng || !["de", "en", "pt"].includes(params.lng)) redirect("/de");

return (
<div className="flex flex-col items-center w-full gap-12">
<div className="max-w-6xl mx-auto w-full">
<div className="grid md:auto-rows-[18rem] grid-cols-2 md:grid-cols-3 gap-4 max-w-7xl mx-auto auto-rows-[10rem]">
<div className="h-full w-full col-span-2 bg-dot-fuchsia-400/50 relative flex items-center justify-center">
<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)]" />
<H1 className="bg-clip-text text-transparent bg-gradient-to-b from-muted-foreground to-foreground">
Atrai Bikes
</H1>
</div>
<PageDialog
lng={params.lng}
content="about"
animatedBackground="beams"
>
<div className="absolute bottom-0 left-0 p-4">
<h2 className="text-2xl font-bold">{i18n[params.lng].about}</h2>
</div>
</PageDialog>
<PageDialog
lng={params.lng}
content="hardware"
animatedBackground="glowing-stars"
size="large"
>
<div className="absolute top-0 right-0 p-4">
<h2 className="text-2xl font-bold">
{i18n[params.lng].hardware}
</h2>
</div>
</PageDialog>

<PageDialog
lng={params.lng}
content="partner"
animatedBackground="grid"
>
<div className="absolute top-0 right-0 p-4">
<h2 className="text-2xl font-bold">{i18n[params.lng].partner}</h2>
</div>
</PageDialog>

<PageDialog lng={params.lng} content="faq" animatedBackground="beams">
<div className="absolute top-0 right-0 p-4">
<h2 className="text-2xl font-bold">{i18n[params.lng].faq}</h2>
</div>
</PageDialog>

<PageDialog
lng={params.lng}
content="blog"
animatedBackground="beams"
>
<div className="absolute top-0 right-0 p-4">
<h2 className="text-2xl font-bold">{i18n[params.lng].blog}</h2>
</div>
</PageDialog>

<PageDialog
lng={params.lng}
content="results"
animatedBackground="beams"
>
<div className="absolute top-0 right-0 p-4">
<h2 className="text-2xl font-bold">{i18n[params.lng].results}</h2>
</div>
</PageDialog>

<PageDialog
lng={params.lng}
content="analytics"
animatedBackground="beams"
size="large"
>
<div className="absolute top-0 right-0 p-4">
<h2 className="text-2xl font-bold">
{i18n[params.lng].analytics}
</h2>
</div>
</PageDialog>

{/* <BentoCard href={"/about"} animatedBackground="beams">
<div className="absolute bottom-0 left-0 p-4">
<h2 className="text-2xl font-bold">{i18n[lng].about}</h2>
</div>
</BentoCard>
<BentoCard
href={"/analytics"}
image={DataAnalyticsImage}
size="large"
>
<h2 className="text-2xl font-bold">{i18n[lng].analytics}</h2>
</BentoCard>
<BentoCard href={"/results"} animatedBackground="glowing-stars">
<h2 className="text-2xl font-bold">{i18n[lng].results}</h2>
</BentoCard>
<BentoCard href={"/blog"} animatedBackground="grid">
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center p-4">
<h2 className="text-2xl font-bold">{i18n[lng].blog}</h2>
</div>
</BentoCard>
<BentoCard size="large" image={HardwareImage} href={"/hardware"}>
<div className="absolute top-0 right-0 p-4">
<h2 className="text-2xl font-bold">{i18n[lng].hardware}</h2>
</div>
</BentoCard>
<BentoCard href={"/partner"} size="large" animatedBackground="beams">
<div className="w-full h-full flex flex-col">
<h2 className="text-2xl font-bold">{i18n[lng].partner}</h2>
<div className="w-full h-full flex items-center justify-around group-hover:scale-105 transition-all">
<div className="relative h-full aspect-square ">
<Image
src={ICImage}
alt="Instituto Cordial"
fill
className="object-contain"
/>
</div>
<div className="relative h-full aspect-square">
<Image
src={ReeduImage}
alt="Reedu"
fill
className="object-contain"
/>
</div>
<div className="relative h-full aspect-square">
<Image
src={Image52N}
alt="52n"
fill
className="object-contain"
/>
</div>
</div>
</div>
</BentoCard>
<BentoCard href={"/faq"} animatedBackground="glowing-stars">
<h2 className="text-2xl font-bold">{i18n[lng].faq}</h2>
</BentoCard> */}
</div>
</div>
</div>
);
// return <Home />;
}
22 changes: 0 additions & 22 deletions src/app/de/(pages)/analytics/page.mdx
View file

This file was deleted.

4 changes: 0 additions & 4 deletions src/app/de/(pages)/blog/page.mdx
View file

This file was deleted.

31 changes: 0 additions & 31 deletions src/app/de/(pages)/faq/page.mdx
View file

This file was deleted.

Loading

0 comments on commit d2dddc6

Please sign in to comment.