feat(GIST-99): card code preview (#41)

gistsapp · Nov 14, 2024 · 99721c3 · 99721c3
1 parent 27d2f24
commit 99721c3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git 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
@@ -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">