starting refinement

src/components/blog/Card.tsx

@@ -0,0 +1,86 @@
+import { Show } from "solid-js";
+import CardLinks from "./CardLinks";
+import DeletePostButton from "./DeletePostButton";
+
+export interface Post {
+  id: number;
+  title: string;
+  subtitle: string | null;
+  body: string | null;
+  banner_photo: string | null;
+  date: string;
+  published: boolean;
+  category: string;
+  author_id: string;
+  reads: number;
+  attachments: string | null;
+  total_likes: number;
+  total_comments: number;
+}
+
+export interface CardProps {
+  post: Post;
+  privilegeLevel: "anonymous" | "admin" | "user";
+  linkTarget: "blog" | "project";
+}
+
+export default function Card(props: CardProps) {
+  return (
+    <div class="relative z-0 mx-auto h-96 w-full overflow-hidden rounded-lg bg-white shadow-lg dark:bg-zinc-900 md:w-5/6 lg:w-3/4">
+      <Show when={props.privilegeLevel === "admin"}>
+        <div class="absolute top-0 w-full border-b border-white border-opacity-20 bg-white bg-opacity-40 px-2 py-4 backdrop-blur-md dark:border-black dark:bg-zinc-800 dark:bg-opacity-60 md:px-6">
+          <div class="flex justify-between">
+            <Show when={!props.post.published}>
+              <div class="whitespace-nowrap text-center text-lg text-black dark:text-white">
+                Not Published
+              </div>
+            </Show>
+            <DeletePostButton
+              type={props.linkTarget === "blog" ? "Blog" : "Project"}
+              postID={props.post.id}
+            />
+          </div>
+        </div>
+      </Show>
+      <img
+        src={
+          props.post.banner_photo
+            ? props.post.banner_photo
+            : props.linkTarget === "blog"
+            ? "/bitcoin.jpg"
+            : "/blueprint.jpg"
+        }
+        alt={props.post.title.replaceAll("_", " ") + " banner"}
+        class="h-full w-full object-cover"
+      />
+      <div class="absolute bottom-0 w-full border-t border-white border-opacity-20 bg-white bg-opacity-40 px-2 py-4 backdrop-blur-md dark:border-zinc-900 dark:bg-zinc-800 dark:bg-opacity-60 md:px-6">
+        <div class="flex flex-col items-center justify-between md:flex-row">
+          <div class="text-center md:text-left">
+            <div class="text-lg text-black dark:text-white md:text-xl">
+              {props.post.subtitle}
+            </div>
+            <div class="text-2xl text-black dark:text-white md:text-3xl">
+              {props.post.title.replaceAll("_", " ")}
+            </div>
+          </div>
+          <div class="flex w-full justify-around pt-2 md:w-1/3 md:justify-between md:pl-2 md:pt-0">
+            <div class="my-auto md:h-full">
+              <p class="whitespace-nowrap text-sm text-black dark:text-white">
+                {props.post.total_comments || 0} Comments
+              </p>
+              <p class="whitespace-nowrap text-sm text-black dark:text-white">
+                {props.post.total_likes || 0} Likes
+              </p>
+            </div>
+            <CardLinks
+              postTitle={props.post.title}
+              linkTarget={props.linkTarget}
+              privilegeLevel={props.privilegeLevel}
+              postID={props.post.id}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}