83 lines
3.2 KiB
Plaintext
83 lines
3.2 KiB
Plaintext
---
|
|
import {formatDateToYYYYMMDD} from "../utils/date-utils";
|
|
interface Props {
|
|
title: string;
|
|
url: string;
|
|
pubDate: Date;
|
|
tags: string[];
|
|
cover: string;
|
|
description: string;
|
|
words: number;
|
|
}
|
|
const { title, url, pubDate, tags, cover, description, words } = Astro.props;
|
|
// console.log(Astro.props);
|
|
import ImageBox from "./misc/ImageBox.astro";
|
|
import ButtonTag from "./control/ButtonTag.astro";
|
|
import { Icon } from 'astro-icon/components';
|
|
|
|
// tags = ['Foo', 'Bar', 'Baz', 'Qux', 'Quux'];
|
|
|
|
// const cover = 'https://saicaca.github.io/vivia-preview/assets/79905307_p0.jpg';
|
|
// cover = null;
|
|
const hasCover = cover !== undefined && cover !== null && cover !== '';
|
|
|
|
|
|
---
|
|
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative">
|
|
<div class:list={["card-base z-30 px-8 py-6 relative ",
|
|
{
|
|
'w-[calc(70%_+_var(--radius-large))]': hasCover,
|
|
'w-[calc(100%_-_76px_+_var(--radius-large))]': !hasCover,
|
|
}
|
|
]}>
|
|
<a href={url}
|
|
class="transition w-full block font-bold mb-1 text-3xl
|
|
text-neutral-900 dark:text-neutral-100
|
|
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
|
|
before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
|
|
before:absolute before:top-8 before:left-4
|
|
">
|
|
This is a very long title
|
|
</a>
|
|
<div class="flex text-neutral-500 dark:text-neutral-400 items-center mb-1">
|
|
<div>{formatDateToYYYYMMDD(pubDate)}</div>
|
|
<div class="transition h-1 w-1 rounded-sm bg-neutral-400 dark:bg-neutral-600 mx-3"></div>
|
|
<div>Uncategorized</div>
|
|
<div class="transition h-1 w-1 rounded-sm bg-neutral-400 dark:bg-neutral-600 mx-3"></div>
|
|
<div>{words} words</div>
|
|
</div>
|
|
<div class="flex gap-2 mb-4">
|
|
{tags.map(t => (
|
|
<ButtonTag dot>{t}</ButtonTag>
|
|
))}
|
|
</div>
|
|
<div class="transition text-neutral-700 dark:text-neutral-300">This is the description of the article</div>
|
|
|
|
</div>
|
|
{!hasCover && <a href={url}
|
|
class="transition w-[72px]
|
|
bg-[var(--btn-enter-bg)] dark:bg-[var(--btn-enter-bg-dark)]
|
|
hover:bg-[var(--btn-card-bg-hover)] active:bg-[var(--btn-card-bg-active)]
|
|
absolute top-0 bottom-0 right-0 flex items-center">
|
|
<Icon name="material-symbols:chevron-right-rounded"
|
|
class="transition text-4xl text-[var(--primary)] ml-[22px]"></Icon>
|
|
</a>}
|
|
|
|
{hasCover && <a href={url}
|
|
class="group w-[30%] absolute top-0 bottom-0 right-0">
|
|
<div class="absolute z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
|
|
<div class="absolute 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="https://saicaca.github.io/vivia-preview/assets/79905307_p0.jpg"
|
|
class="w-full h-full">
|
|
</ImageBox>
|
|
</a>}
|
|
</div>
|
|
|
|
<style lang="stylus">
|
|
:root
|
|
--btn-enter-bg oklch(0.98 0.005 var(--hue))
|
|
--btn-enter-bg-dark oklch(0.2 0.02 var(--hue))
|
|
</style> |