tidy up, add section header component with links + make breadcrumb component

2024-07-15 15:18:04 +02:00
parent e7fb07005c
commit ebb0ee41ff
14 changed files with 90 additions and 48 deletions
@@ -0,0 +1,11 @@
+import Link from "next/link";
+import styles from "./breadcrumb.module.scss";
+
+export const Breadcrumb = ({ link, text, date }: { link: string, text: string, date?: string }) => {
+  return (
+    <div className={styles.breadcrumb}>
+      <Link href={link}>{text}</Link>
+      {date && <span className={styles.date}>{date}</span>}
+    </div>
+  );
+};
@@ -0,0 +1,16 @@
+import Link from "next/link";
+import styles from "./sectionHeader.module.scss";
+
+export const SectionHeader = ({ heading, link, linkText }: { heading: string, link?: string, linkText?: string }) => {
+  return (
+    <header className={styles.sectionHeader}>
+      <h2 className="circlehead">
+        <span className="circle"></span>
+        <span className="circle"></span>
+        <span className="circle"></span>
+        {heading}
+      </h2>
+      {link && linkText && <Link href={link}>{linkText}</Link>}
+    </header>
+  );
+};
@@ -0,0 +1,26 @@
+.breadcrumb {
+  display: block;
+  font-weight: 400;
+  font-size: var(--font-size-xs);
+  margin-bottom: var(--spacing-s);
+
+  a {
+    text-decoration: none;
+    font-size: var(--font-size-caption);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    font-weight: 400;
+  }
+}
+
+.date {
+  font-size: var(--font-size-caption);
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  font-weight: 400;
+  &:before {
+    content: "—";
+    display: inline-block;
+    margin: 0 .25rem;
+  }
+}
@@ -0,0 +1,20 @@
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  a {
+    display: block;
+    font-family: var(--font-serif);
+    margin-bottom: var(--spacing-s);
+    position: relative;
+    /*padding-left: 1.6rem;
+
+    &:before {
+      content: "→";
+      position: absolute;
+      left: 0;
+    }*/
+  }
+}
+