43 lines
1.4 KiB
Plaintext
43 lines
1.4 KiB
Plaintext
---
|
|
import { Image } from 'astro:assets';
|
|
import type { Post } from '../hn-gql';
|
|
import {getFormattedDate} from '../utils/utility';
|
|
|
|
interface Props {
|
|
post: Post;
|
|
}
|
|
|
|
const { post } = Astro.props;
|
|
---
|
|
|
|
<div class="relative flex flex-row flex-wrap items-center justify-center">
|
|
<div class="mb-5 flex w-full flex-row items-center justify-center md:mb-0 md:w-auto md:justify-start">
|
|
<div class="flex mr-1">
|
|
<Image
|
|
src={post.author.profilePicture}
|
|
alt={post.author.name}
|
|
width={50}
|
|
height={50}
|
|
class="rounded-3xl mr-3"
|
|
loading="eager"
|
|
transition:animate={"fade"}
|
|
transition:name={'author:' + post.author.profilePicture}
|
|
/>
|
|
<div class="mt-3 flex">
|
|
<span transition:animate={"fade"}
|
|
transition:name={'author:' + post.author.name}
|
|
>{post.author.name}</span>
|
|
<span class="mx-3 block font-bold text-slate-500">.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-5 flex w-full flex-row items-center justify-center md:mb-0 md:w-auto md:justify-start" >
|
|
<span transition:animate={"fade"}
|
|
transition:name={'hero:' + post.publishedAt}
|
|
>{getFormattedDate(post.publishedAt)}</span>
|
|
<span class="mx-3 block font-bold text-slate-500">.</span>
|
|
<span transition:animate={"fade"}
|
|
transition:name={'hero:' + post.readTimeInMinutes}
|
|
>{post.readTimeInMinutes} min read</span>
|
|
</div>
|
|
</div> |