This commit is contained in:
Michael Freno
2025-12-18 13:35:01 -05:00
parent b43f693295
commit 372a8aa5fc
8 changed files with 59 additions and 177 deletions

View File

@@ -25,47 +25,40 @@ export interface CardProps {
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">
<div class="bg-base relative z-0 mx-auto h-96 w-full overflow-hidden rounded-lg shadow-lg md:w-5/6 lg:w-3/4 dark:bg-zinc-900">
<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="border-opacity-20 bg-opacity-40 dark:bg-opacity-60 absolute top-0 w-full border-b border-white bg-white px-2 py-4 backdrop-blur-md md:px-6 dark:border-black dark:bg-zinc-800">
<div class="flex justify-between">
<Show when={!props.post.published}>
<div class="whitespace-nowrap text-center text-lg text-black dark:text-white">
<div class="text-center text-lg whitespace-nowrap text-black dark:text-white">
Not Published
</div>
</Show>
<DeletePostButton
type="Blog"
postID={props.post.id}
/>
<DeletePostButton type="Blog" postID={props.post.id} />
</div>
</div>
</Show>
<img
src={
props.post.banner_photo
? props.post.banner_photo
: "/bitcoin.jpg"
}
src={props.post.banner_photo ? props.post.banner_photo : "/bitcoin.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="border-opacity-20 bg-opacity-40 dark:bg-opacity-60 bg-base absolute bottom-0 w-full border-t border-white px-2 py-4 backdrop-blur-md md:px-6 dark:border-zinc-900 dark:bg-zinc-800">
<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">
<div class="text-lg text-black md:text-xl dark:text-white">
{props.post.subtitle}
</div>
<div class="text-2xl text-black dark:text-white md:text-3xl">
<div class="text-2xl text-black md:text-3xl dark:text-white">
{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="flex w-full justify-around pt-2 md:w-1/3 md:justify-between md:pt-0 md:pl-2">
<div class="my-auto md:h-full">
<p class="whitespace-nowrap text-sm text-black dark:text-white">
<p class="text-sm whitespace-nowrap text-black dark:text-white">
{props.post.total_comments || 0} Comments
</p>
<p class="whitespace-nowrap text-sm text-black dark:text-white">
<p class="text-sm whitespace-nowrap text-black dark:text-white">
{props.post.total_likes || 0} Likes
</p>
</div>