87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
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>
|
|
);
|
|
}
|