From 165ecc014fabef6d75e811073875b7e433e82f34 Mon Sep 17 00:00:00 2001
From: Souma <101255979+5ouma@users.noreply.github.com>
Date: Fri, 8 Nov 2024 18:15:54 +0900
Subject: [PATCH] feat(component): Add bio to show user info

Show its icon, name and description.
---
 src/components/Bio/Bio.astro | 19 +++++++++++++++++++
 src/components/Bio/style.css | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 src/components/Bio/Bio.astro
 create mode 100644 src/components/Bio/style.css

diff --git a/src/components/Bio/Bio.astro b/src/components/Bio/Bio.astro
new file mode 100644
index 0000000..519557c
--- /dev/null
+++ b/src/components/Bio/Bio.astro
@@ -0,0 +1,19 @@
+---
+import "../../styles/global.css";
+import "./style.css";
+
+export type Props = {
+  name: string;
+  description: string;
+  icon: string;
+};
+const props = Astro.props;
+---
+
+<div id="bio">
+  <div id="profile">
+    <img src={props.icon} alt="icon" loading="lazy" decoding="async" />
+    <span id="name">{props.name}</span>
+  </div>
+  <span id="description">{props.description}</span>
+</div>
diff --git a/src/components/Bio/style.css b/src/components/Bio/style.css
new file mode 100644
index 0000000..6056a63
--- /dev/null
+++ b/src/components/Bio/style.css
@@ -0,0 +1,36 @@
+#bio {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0.3rem;
+}
+
+#profile {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+img {
+  width: 6rem;
+  height: auto;
+}
+
+span {
+  font-family: "LINE Seed JP" sans-serif;
+  font-style: normal;
+  line-height: normal;
+  color: var(--foreground);
+}
+
+#name {
+  font-size: 2.5rem;
+  font-weight: bold;
+}
+
+#description {
+  font-size: 0.9rem;
+  font-weight: normal;
+  white-space: pre-line;
+}