blog/src/components/TitleCardNew.astro

---
import path from "path";
import PostMetadata from "./PostMetadata.astro";
interface Props {
    class: string;
    entry: any;
    title: string;
    url: string;
    published: Date;
    tags: string[];
    category: string;
    image: string;
    description: string;
    words: number;
    draft: boolean;
}
const { entry, title, url, published, tags, category, image, description, words } = Astro.props;
const className = Astro.props.class;
// console.log(Astro.props);
import ImageBox from "./misc/ImageBox.astro";
import ButtonTag from "./control/ButtonTag.astro";
import { Icon } from 'astro-icon/components';
import Button from "./control/Button.astro";
import {i18n} from "../i18n/translation";
import I18nKey from "../i18n/i18nKey";
import {getDir} from "../utils/url-utils";

const hasCover = image !== undefined && image !== null && image !== '';

const coverWidth = "28%";

const { remarkPluginFrontmatter } = await entry.render();

---
<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]}>
    <div class:list={["pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
        <a href={url}
           class="transition w-full block font-bold mb-3 text-3xl
        text-black/90 dark:text-white/90
        hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
        active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
        before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
        before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
        ">
            {title}<Icon class="inline text-[var(--primary)] md:hidden -translate-y-[0.15rem]" name="material-symbols:chevron-right-rounded" size={28} ></Icon>
        </a>

        <!-- metadata -->
        <PostMetadata published={published} tags={tags} category={category} hideTagsForMobile={true} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>

        <div class="transition text-black/75 dark:text-white/75 mb-3.5">
            { description }
        </div>

        <div class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition">
            <div>{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
            <div>|</div>
            <div>{remarkPluginFrontmatter.minutes} {" " + i18n(I18nKey.minutesCount)}</div>
        </div>

    </div>

    {hasCover && <a href={url} aria-label={title}
                    class:list={["group",
                        "max-h-[20vh] md:max-h-none mx-4 mt-4 -mb-2 md:mb-0 md:mx-0 md:mt-0",
                        "md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95"
                    ]} >
        <div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
        <div class="absolute pointer-events-none z-20 w-full h-full flex items-center justify-center ">
            <Icon name="material-symbols:chevron-right-rounded"
                  class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
            </Icon>
        </div>
        <ImageBox src={image} basePath={path.join("content/posts/", getDir(entry.id))} alt="Cover Image of the Post"
                  class="w-full h-full">
        </ImageBox>
    </a>}

    {!hasCover &&
        <a href={url} aria-label={title} class="hidden md:block">
            <Button name="Enter the Post" width="3.25rem" height="full" class="absolute right-3 top-3 bottom-3 rounded-xl bg-[var(--enter-btn-bg)] hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95">
                <Icon name="material-symbols:chevron-right-rounded"
                      class="transition text-[var(--primary)] text-4xl mx-auto">
                </Icon>
            </Button>
        </a>
    }
</div>
<div class="transition border-t-[1px] border-dashed mx-6 border-black/10 dark:border-white/[0.15] last:border-t-0 md:hidden"></div>

<style lang="stylus" define:vars={{coverWidth}}>
:root
  --btn-enter-bg oklch(0.98 0.005 var(--hue))
  --btn-enter-bg-dark oklch(0.2 0.02 var(--hue))

</style>