Backup

2 files changed, 44 insertions, 4 deletions

diff --git a/src/components/BlogItem.astro b/src/components/BlogItem.astro
new file mode 100644
index 0000000..5f6b0e5
--- /dev/null
+++ b/src/components/BlogItem.astro
@@ -0,0 +1,22 @@
+---
+import TerminalBorder from "../components/TerminalBorder.astro";
+
+interface Props {
+    title: string;
+    description: string;
+    date: string;
+}
+
+const { title, description, date } = Astro.props;
+---
+
+<TerminalBorder footer={date} margin="0 0 20px">
+    <span>
+        <h1 class="text-[130%] text-[var(--accent)]">
+            {title}
+        </h1>
+        <p class="text-[var(--secondary)]">
+            {description}
+        </p>
+    </span>
+</TerminalBorder>
diff --git a/src/components/TerminalBorder.astro b/src/components/TerminalBorder.astro
index bb6874c..0d9a75d 100644
--- a/src/components/TerminalBorder.astro
+++ b/src/components/TerminalBorder.astro
@@ -1,15 +1,22 @@
 ---
 interface Props {
-    header: string;
+    header?: string;
+    footer?: string;
     margin?: string;
     class?: string;
 }
 
-const { header, margin = "-1px", class: htmlClass } = Astro.props;
+const {
+    header = "",
+    footer = "",
+    margin = "-1px",
+    class: htmlClass,
+} = Astro.props;
 ---
 
 <div class="section" style={`margin: ${margin};`} class={htmlClass}>
-    <span class="tag">{header}</span>
+    <span class="tag-top">{header}</span>
+    <span class="tag-bottom">{footer}</span>
     <slot />
 </div>
 
@@ -24,7 +31,7 @@ const { header, margin = "-1px", class: htmlClass } = Astro.props;
         border-color: var(--alt);
     }
 
-    .tag {
+    .tag-top {
         position: absolute;
         top: -0.6rem;
         left: 0.5rem;
@@ -34,4 +41,15 @@ const { header, margin = "-1px", class: htmlClass } = Astro.props;
         font-size: 0.8rem;
         color: var(--alt);
     }
+
+    .tag-bottom {
+        position: absolute;
+        bottom: -0.6rem;
+        left: 0.5rem;
+        background-color: var(--background);
+        padding-right: 0.5rem;
+        padding-left: 0.5rem;
+        font-size: 0.8rem;
+        color: var(--alt);
+    }
 </style>