35abd0496e
Ensure uniform code formatting across components by aligning with the established code style. Adjust imports, indentation, and spacing to enhance readability and maintainability.
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import * as React from "react";
|
|
import { ContentCard } from "@/components/content-card";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import { ContentService } from "@/services/content.service";
|
|
import type { Content } from "@/types/content";
|
|
|
|
export default function MemeModal({
|
|
params,
|
|
}: {
|
|
params: Promise<{ slug: string }>;
|
|
}) {
|
|
const { slug } = React.use(params);
|
|
const router = useRouter();
|
|
const [content, setContent] = React.useState<Content | null>(null);
|
|
const [loading, setLoading] = React.useState(true);
|
|
|
|
React.useEffect(() => {
|
|
ContentService.getOne(slug)
|
|
.then(setContent)
|
|
.catch(console.error)
|
|
.finally(() => setLoading(false));
|
|
}, [slug]);
|
|
|
|
return (
|
|
<Dialog open onOpenChange={(open) => !open && router.back()}>
|
|
<DialogContent className="max-w-3xl p-0 overflow-hidden bg-transparent border-none">
|
|
<DialogTitle className="sr-only">
|
|
{content?.title || "Détail du mème"}
|
|
</DialogTitle>
|
|
<DialogDescription className="sr-only">
|
|
Affiche le mème en grand avec ses détails
|
|
</DialogDescription>
|
|
{loading ? (
|
|
<div className="h-[500px] flex items-center justify-center bg-zinc-950/50 rounded-lg">
|
|
<Spinner className="h-10 w-10 text-white" />
|
|
</div>
|
|
) : content ? (
|
|
<div className="bg-white dark:bg-zinc-900 rounded-lg overflow-hidden">
|
|
<ContentCard content={content} />
|
|
</div>
|
|
) : (
|
|
<div className="p-8 bg-white dark:bg-zinc-900 rounded-lg text-center">
|
|
<p>Impossible de charger ce mème.</p>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|