diff options
Diffstat (limited to 'examples/blog/src/components/BlogPostPreview.astro')
| -rw-r--r-- | examples/blog/src/components/BlogPostPreview.astro | 34 |
1 files changed, 11 insertions, 23 deletions
diff --git a/examples/blog/src/components/BlogPostPreview.astro b/examples/blog/src/components/BlogPostPreview.astro index f935ff8b2..865eeeb7f 100644 --- a/examples/blog/src/components/BlogPostPreview.astro +++ b/examples/blog/src/components/BlogPostPreview.astro @@ -1,48 +1,36 @@ --- export interface Props { - post: any; + title: string; + description: string; + publishDate: string; + url: string; } -const { post } = Astro.props; +const { title, description, publishDate, url } = Astro.props as Props; --- <article class="post-preview"> <header> - <p class="publish-date">{post.frontmatter.publishDate}</p> - <a href={post.url}><h1 class="title">{post.frontmatter.title}</h1></a> + <time>{publishDate}</time> + <a href={url}><h1 class="title">{title}</h1></a> </header> - <p>{post.frontmatter.description}</p> - <a href={post.url}>Read more</a> + <p>{description}</p> + <a href={url}>Read more</a> </article> <style> - .content :global(main > * + *) { - margin-top: 1rem; - } - .post-preview { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 4px solid var(--theme-divider); } - header { - align-items: flex-start; - display: flex; - flex-direction: column; - justify-content: center; - padding-bottom: 2rem; - text-align: left; - } - .title, - .author, - .publish-date { + time { margin: 0; } - .publish-date, - .author { + time { font-size: 1.25rem; color: var(--theme-text-lighter); } |