summaryrefslogtreecommitdiff
path: root/examples/blog/src/components/BlogPostPreview.astro
diff options
context:
space:
mode:
Diffstat (limited to 'examples/blog/src/components/BlogPostPreview.astro')
-rw-r--r--examples/blog/src/components/BlogPostPreview.astro57
1 files changed, 57 insertions, 0 deletions
diff --git a/examples/blog/src/components/BlogPostPreview.astro b/examples/blog/src/components/BlogPostPreview.astro
new file mode 100644
index 000000000..9e698fb6e
--- /dev/null
+++ b/examples/blog/src/components/BlogPostPreview.astro
@@ -0,0 +1,57 @@
+---
+export interface Props {
+ post: any;
+}
+
+const { post } = Astro.props;
+---
+<article class="post-preview">
+ <header>
+ <h3 class="publish-date">{post.publishDate}</h3>
+ <a href={post.url}><h1 class="title">{post.title}</h1></a>
+ </header>
+ <main>
+ <p>{post.description}</p>
+ <a href={post.url}>Read more</a>
+ </main>
+</article>
+
+<style>
+.content :global(main > * + *) {
+ margin-top: 1rem;
+}
+
+.post-preview {
+ padding-bottom: 2rem;
+ margin-bottom: 2rem;
+ border-bottom: 4px solid var(--theme-divider);
+}
+
+header {
+ display: flex;
+ flex-direction: column;
+ text-align: left;
+ align-items: flex-start;
+ justify-content: center;
+
+ padding-bottom: 2rem;
+}
+
+.title,
+.author,
+.publish-date {
+ margin: 0;
+}
+
+.publish-date,
+.author {
+ font-size: 1.25rem;
+ color: var(--theme-text-lighter);
+}
+
+.title {
+ font-size: 2.25rem;
+ font-weight: 700;
+ color: var(--theme-text);
+}
+</style>