project pages created and populated automatically

components/mdx/ProjectPreviewGrid.tsx

@@ -0,0 +1,31 @@
+type PreviewItem = {
+  title: string;
+  image: string;
+};
+
+type props = {
+  items?: PreviewItem[];
+};
+
+export function ProjectPreviewGrid({ items = [] }: props) {
+  return (
+    <div className="grid gap-6 md:grid-cols-2">
+      {items.map((item) => (
+        <div
+          key={item.title}
+          className="rounded-2xl overflow-hidden bg-[#2b160f] text-white min-h-[260px] flex items-center justify-center"
+        >
+          {item.image ? (
+            <img
+              src={item.image}
+              alt={item.title}
+              className="h-full w-full object-cover"
+            />
+          ) : (
+            <span className="text-2xl">{item.title}</span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

components/mdx/ProjectVisitButton.tsx

@@ -0,0 +1,18 @@
+type VisitButtonProps = {
+  href: string;
+};
+
+export function ProjectVisitButton({ href }: VisitButtonProps) {
+  return (
+    <div className="flex justify-center">
+      <a
+        href={href}
+        target="_blank"
+        rel="noreferrer"
+        className="rounded-full bg-[#2b160f] px-4 py-2 text-white text-sm"
+      >
+        Visiter le site
+      </a>
+    </div>
+  );
+}

components/mdx/ProjectsColumns.tsx

@@ -0,0 +1,11 @@
+type props = {
+  children: React.ReactNode;
+};
+
+export function ProjectsColumns({ children }: props) {
+  return (
+    <div className="grid gap-6 md:grid-cols-2">
+      {children}
+    </div>
+  );
+}

components/mdx/mdx-components.tsx

@@ -0,0 +1,9 @@
+import { ProjectsColumns } from "@/components/mdx/ProjectsColumns";
+import { ProjectPreviewGrid } from "@/components/mdx/ProjectPreviewGrid";
+import { ProjectVisitButton } from "@/components/mdx/ProjectVisitButton";
+
+export const mdxComponents = {
+  ProjectsColumns: ProjectsColumns,
+  ProjectPreviewGrid,
+  ProjectVisitButton,
+};