From 206570359feaae226c517ec5b0f1bfa6c1f9b205 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 4 Apr 2025 18:54:38 +0200
Subject: [PATCH] feat: :sparkles: add profile sidebar component

---
 src/components/profile.webc | 105 ++++++++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 src/components/profile.webc

diff --git a/src/components/profile.webc b/src/components/profile.webc
new file mode 100644
index 0000000..6868c37
--- /dev/null
+++ b/src/components/profile.webc
@@ -0,0 +1,105 @@
+<aside class="profile">
+  <div class="main">
+    <div class="avatar">
+      <slot name="avatar"></slot>
+    </div>
+    <div class="text">
+      <p class="name"><slot name="name"></slot></p>
+      <p class="species"><slot name="species"></slot></p>
+    </div>
+  </div>
+  <div class="data">
+    <slot></slot>
+  </div>
+</aside>
+
+<style>
+  .profile {
+    --sidebar-position: static;
+    --sidebar-size: 65ch;
+    --sidebar-padding: 1rem;
+    --sidebar-top-flex: 1 1 auto;
+    --sidebar-top-flow: row nowrap;
+    --sidebar-top-text-align: left;
+    --sidebar-avatar-size: 5em;
+
+    position: var(--sidebar-position);
+    top: var(--page-spacing);
+
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.75em;
+
+    width: 100%;
+    max-width: var(--sidebar-size);
+
+    background-color: var(--clr-box-background);
+
+    border: var(--border-thin) solid var(--clr-box-border);
+    border-radius: var(--border-radius);
+    padding-block: var(--sidebar-padding);
+    padding-inline: var(--sidebar-padding);
+
+    @media (min-width: 64em) {
+      --sidebar-position: sticky;
+      --sidebar-size: 18em;
+      --sidebar-padding: 1.5rem;
+      --sidebar-top-flex: 0 0 auto;
+      --sidebar-top-flow: column nowrap;
+      --sidebar-top-text-align: center;
+      --sidebar-avatar-size: 10em;
+    }
+
+    & .main {
+      flex: var(--sidebar-top-flex);
+      display: flex;
+      flex-flow: var(--sidebar-top-flow);
+      align-items: center;
+      gap: 1em;
+
+      & p {
+        margin-block: 0;
+
+        & + p {
+          margin-block: 0.75em 0;
+        }
+      }
+    }
+
+    & .avatar {
+      flex: 0 1 var(--sidebar-avatar-size);
+    }
+
+    & .data {
+      border-block-start: var(--border-thin) solid var(--clr-box-border);
+      padding-block: 0.75em 0;
+    }
+
+    & picture {
+      display: block;
+      width: var(--sidebar-avatar-size);
+      height: var(--sidebar-avatar-size);
+    }
+
+    & img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      border-radius: 1em;
+    }
+
+    & .name {
+      font-family: var(--font-family-headings);
+      font-size: 1.375em;
+      font-weight: bold;
+      text-align: var(--sidebar-top-text-align);
+    }
+
+    & .species {
+      font-family: var(--font-family-headings);
+      font-size: 0.75em;
+      text-align: var(--sidebar-top-text-align);
+      background-color: var(--clr-tag-background);
+    }
+  }
+</style>