From 99721c30d8215811a268f32a519efb8893a195f4 Mon Sep 17 00:00:00 2001
From: Rapidement <dorian.grasset.contact@gmail.com>
Date: Thu, 14 Nov 2024 12:49:38 +0100
Subject: [PATCH] feat(GIST-99): card code preview (#41)

---
 src/app/(gistLayout)/mygist/page-ui.tsx |  2 +-
 src/components/ui/card.tsx              | 25 +++++++++++++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/app/(gistLayout)/mygist/page-ui.tsx b/src/app/(gistLayout)/mygist/page-ui.tsx
index fa72e54..a054d7b 100644
--- a/src/app/(gistLayout)/mygist/page-ui.tsx
+++ b/src/app/(gistLayout)/mygist/page-ui.tsx
@@ -30,7 +30,7 @@ export default function MyGistsPage({}: MyGistPageProps) {
       <PaginationProvider fromUrl>
         <MyGistListFeature />
         <div className="h-[1px] bg-border"></div>
-        <div className="p-4">
+        <div className="py-4 px-6 flex flex-row justify-between items-center rounded-b-lg border-border border-l border-b border-r">
           <PaginationComponent />
         </div>
       </PaginationProvider>
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index b52aed2..798a60c 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -12,6 +12,8 @@ import {
 import { Trash2 } from "lucide-react"
 import Shortcut from "./shortcut"
 import { Gist } from "@/types"
+import { Codearea } from "../shadcn/codearea"
+import { getLanguage } from "@/lib/language"
 
 interface CardProps {
   gist: Gist
@@ -20,13 +22,32 @@ interface CardProps {
 }
 
 export default function Card({ gist, href, onDeleteGist }: CardProps) {
+  const language = getLanguage(gist.name)
+
   return (
     <ContextMenu>
-      <ContextMenuTrigger className="flex items-center justify-start rounded-md text-sm font-semibold text-slate-400 w-full">
-        <Link href={href} passHref className="relative hover:border-primary border-border border group w-full h-full">
+      <ContextMenuTrigger>
+        <Link
+          href={href}
+          passHref
+          className="relative flex items-center justify-start hover:border-primary transition-all group/card border-border border group w-full h-full overflow-hidden"
+        >
           <Badge className="absolute bottom-8 left-8" variant={"title"}>
             {gist.name}
           </Badge>
+          <div className={`${gist.code === "" ? "flex w-full items-center justify-center" : "absolute inset-0 -z-10"}`}>
+            {gist.code !== "" ? (
+              <Codearea
+                className="w-full h-full rounded-none opacity-50 group-hover/card:opacity-100 transition-all duration-200 border-none p-4"
+                value={gist.code}
+                language={language}
+              />
+            ) : (
+              <div className="text-[10px] opacity-50 group-hover/card:opacity-100 transition-all duration-200 p-4 text-gray-500">
+                Gist empty
+              </div>
+            )}
+          </div>
         </Link>
       </ContextMenuTrigger>
       <ContextMenuContent className="w-64">