From 78085fbc1b3c411ceb86d476d9a178ac8a110010 Mon Sep 17 00:00:00 2001
From: ks0m1c_dharma <sakiyamuni@sams.ara>
Date: Fri, 22 Dec 2023 20:03:30 +0800
Subject: [PATCH] Sidenote CSS

---
 assets/css/app.css                          | 50 +++++++++++++++++++++
 lib/vyasa_web/components/core_components.ex | 25 +++++++++++
 2 files changed, 75 insertions(+)

diff --git a/assets/css/app.css b/assets/css/app.css
index dfd8fad6..efe60751 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -10,4 +10,54 @@
       url('/fonts/gotu/Gotu-Regular.woff') format('woff'),
       url('/fonts/gotu/Gotu-Regular.ttf') format('ttf');
 }
+
+@font-face {
+    font-family: "et-book";
+    src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot");
+    src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "et-book";
+    src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot");
+    src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") format("truetype"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf") format("svg");
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "et-book";
+    src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot");
+    src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf") format("svg");
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "et-book-roman-old-style";
+    src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot");
+    src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff") format("woff"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf") format("truetype"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg#etbookromanosf") format("svg");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
 /* This file is for your main   application CSS */
+
+.sidenote,
+.marginnote {
+    float: right;
+    clear: right;
+    margin-right: -60%;
+    width: 50%;
+    margin-top: 0.3rem;
+    margin-bottom: 0;
+    font-size: 1.1rem;
+    line-height: 1.3;
+    vertical-align: baseline;
+    position: relative;
+}
diff --git a/lib/vyasa_web/components/core_components.ex b/lib/vyasa_web/components/core_components.ex
index 37083c7a..fe2f0cdc 100644
--- a/lib/vyasa_web/components/core_components.ex
+++ b/lib/vyasa_web/components/core_components.ex
@@ -441,6 +441,30 @@ defmodule VyasaWeb.CoreComponents do
     """
   end
 
+  @doc """
+  Renders a sidenote w action slots for interaction with sidenote
+  """
+  attr :class, :string, default: nil
+  slot :inner_block, required: true
+  slot :subtitle
+  slot :actions
+
+  def sidenote(assigns) do
+    ~H"""
+    <header class={[@actions != [] && "sidenote", @class]}>
+      <div>
+        <h1 class="text-lg font-semibold sidenote text-zinc-800">
+          <%= render_slot(@inner_block) %>
+        </h1>
+        <p :if={@subtitle != []} class="mt-2 text-sm sidenote leading-6 text-zinc-600">
+          <%= render_slot(@subtitle) %>
+        </p>
+      </div>
+      <div class="flex-none"><%= render_slot(@actions) %></div>
+    </header>
+    """
+  end
+
   @doc ~S"""
   Renders a table with generic styling.
 
@@ -536,6 +560,7 @@ defmodule VyasaWeb.CoreComponents do
   def list(assigns) do
     ~H"""
     <div class="mt-14">
+      <%= render_slot(@inner_block) %>
       <dl class="-my-4 divide-y divide-zinc-100">
         <div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
           <dt :if={Map.has_key?(item, :title)} class="w-1/6 flex-none text-zinc-500"><%= item.title %></dt>