refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 47 insertions, 0 deletions

diff --git a/src/components/organisms/widgets/image-widget.module.scss b/src/components/organisms/widgets/image-widget.module.scss
new file mode 100644
index 0000000..0d69441
--- /dev/null
+++ b/src/components/organisms/widgets/image-widget.module.scss
@@ -0,0 +1,47 @@
+@use "@styles/abstracts/functions" as fun;
+
+.figure {
+  --scale-up: 1.02;
+  --scale-down: 0.98;
+
+  margin: 0;
+  padding: fun.convert-px(5);
+  border: fun.convert-px(1) solid var(--color-border);
+}
+
+.txt {
+  padding: var(--spacing-sm);
+}
+
+.widget {
+  &--left {
+    .figure {
+      margin-right: auto;
+    }
+
+    .txt {
+      text-align: left;
+    }
+  }
+
+  &--center {
+    .figure {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .txt {
+      text-align: center;
+    }
+  }
+
+  &--right {
+    .figure {
+      margin-left: auto;
+    }
+
+    .txt {
+      text-align: right;
+    }
+  }
+}