yral-dapp · harsh-mn-yral · Dec 9, 2024 · Dec 9, 2024
diff --git a/ssr/src/component/buttons.rs b/ssr/src/component/buttons.rs
@@ -0,0 +1,133 @@
+use leptos::*;
+
+#[component]
+pub fn Button(
+    children: Children,
+    on_click: impl Fn() + 'static,
+    #[prop(optional)] classes: String,
+    #[prop(optional)] alt_style: Signal<bool>,
+    #[prop(optional)] disabled: Signal<bool>,
+) -> impl IntoView {
+    let on_click = move |_| on_click();
+    view! {
+        <button
+            on:click=on_click
+            disabled=disabled.get()
+            class=format!(
+                "w-full px-5 py-3 rounded-lg flex items-center transition-all justify-center gap-8 font-kumbh font-bold {} {}",
+                if disabled.get() {
+                    "text-white/50"
+                } else if alt_style.get() {
+                    "text-[#E2017B]"
+                } else {
+                    "text-white"
+                },
+                classes,
+            )
+            style=format!(
+                "background: linear-gradient(73deg, {} );",
+                if disabled.get() {
+                    "#DE98BE 0%, #E761A9 33%, #7B5369 100%"
+                } else if alt_style.get() {
+                    "#FFF 0%, #FFF 1000%"
+                } else {
+                    "#DA539C 0%, #E2017B 33%, #5F0938 100%"
+                },
+            )
+        >
+            {children()}
+        </button>
+    }
+}
+
+#[component]
+pub fn LinkButton(
+    children: Children,
+    href: String,
+    #[prop(optional)] classes: String,
+    #[prop(optional)] alt_style: Signal<bool>,
+    #[prop(optional)] disabled: Signal<bool>,
+) -> impl IntoView {
+    view! {
+        <a
+            href=href
+            class=format!(
+                "w-full px-5 py-3 rounded-lg flex items-center transition-all justify-center gap-8 font-kumbh font-bold {} {}",
+                if disabled.get() {
+                    "text-white/50"
+                } else if alt_style.get() {
+                    "text-[#E2017B]"
+                } else {
+                    "text-white"
+                },
+                classes,
+            )
+            style=format!(
+                "background: linear-gradient(73deg, {} );",
+                if disabled.get() {
+                    "#DE98BE 0%, #E761A9 33%, #7B5369 100%"
+                } else if alt_style.get() {
+                    "#FFF 0%, #FFF 1000%"
+                } else {
+                    "#DA539C 0%, #E2017B 33%, #5F0938 100%"
+                },
+            )
+        >
+            {children()}
+        </a>
+    }
+}
+
+#[component]
+pub fn SecondaryLinkButton(
+    children: Children,
+    href: String,
+    #[prop(optional)] classes: String,
+    #[prop(optional)] alt_style: Signal<bool>,
+) -> impl IntoView {
+    view! {
+        <a
+            href=href
+            class=format!(
+                "rounded-full border border-white text-sm font-bold font-kumbh px-5 py-2 {} {}",
+                if alt_style.get() {
+                    "bg-transparent text-white hover:bg-white/10 active:bg-white/5"
+                } else {
+                    "bg-white text-black"
+                },
+                classes,
+            )
+        >
+            {children()}
+        </a>
+    }
+}
+
+#[component]
+pub fn SecondaryButton(
+    children: Children,
+    disabled: Signal<bool>,
+    alt_style: Signal<bool>,
+    classes: String,
+    on_click: impl Fn() + 'static,
+) -> impl IntoView {
+    let on_click = move |_| on_click();
+    view! {
+        <button
+            disabled=disabled.get()
+            on:click=on_click
+            class=format!(
+                "rounded-full border border-white text-sm font-bold font-kumbh px-5 py-2 {} {}",
+                if alt_style.get() {
+                    "bg-transparent text-white hover:bg-white/10 active:bg-white/5"
+                } else {
+                    "bg-white text-black"
+                },
+                classes,
+            )
+        >
+
+            {children()}
+        </button>
+    }
+}
diff --git a/ssr/src/component/icons/arrow_down_icon.rs b/ssr/src/component/icons/arrow_down_icon.rs
@@ -0,0 +1,32 @@
+use leptos::*;
+
+#[component]
+pub fn ArrowDownIcon(
+    #[prop(optional, default = "w-full h-full".to_string())] classes: String,
+) -> impl IntoView {
+    view! {
+        <svg
+            class=format!("{}", classes)
+            viewBox="0 0 19 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M1.96481 11.4648L9.49998 19L17.0352 11.4648"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-miterlimit="10"
+                stroke-linecap="square"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M9.5 0.999962L9.5 18.3793"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-miterlimit="10"
+                stroke-linecap="square"
+                stroke-linejoin="round"
+            />
+        </svg>
+    }
+}
diff --git a/ssr/src/component/icons/arrow_right_long_icon.rs b/ssr/src/component/icons/arrow_right_long_icon.rs
@@ -0,0 +1,32 @@
+use leptos::*;
+
+#[component]
+pub fn ArrowRightLongIcon(
+    #[prop(optional, default = "w-full h-full".to_string())] classes: String,
+) -> impl IntoView {
+    view! {
+        <svg
+            class=format!("{}", classes)
+            viewBox="0 0 38 19"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M29.4648 17.0352L37 9.50002L29.4648 1.96484"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-miterlimit="10"
+                stroke-linecap="square"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M1 9.5L36 9.5"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-miterlimit="10"
+                stroke-linecap="square"
+                stroke-linejoin="round"
+            />
+        </svg>
+    }
+}
diff --git a/ssr/src/component/icons/chevron_left_icon.rs b/ssr/src/component/icons/chevron_left_icon.rs
@@ -0,0 +1,22 @@
+use leptos::*;
+
+#[component]
+pub fn ChevronLeftIcon(
+    #[prop(optional, default = "w-full h-full".to_string())] classes: String,
+) -> impl IntoView {
+    view! {
+        <svg
+            class=format!("{}", classes)
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M15.2404 2.03981C15.7611 1.47858 16.6491 1.47858 17.1697 2.03981C17.638 2.54456 17.638 3.32496 17.1697 3.82972L9.58989 12L17.1697 20.1703C17.638 20.675 17.638 21.4554 17.1697 21.9602C16.6491 22.5214 15.7611 22.5214 15.2404 21.9602L7.26194 13.3602C6.55021 12.5931 6.55021 11.4069 7.26194 10.6398L15.2404 2.03981Z"
+                fill="currentColor"
+            />
+        </svg>
+    }
+}
diff --git a/ssr/src/component/icons/chevron_right_icon.rs b/ssr/src/component/icons/chevron_right_icon.rs
@@ -0,0 +1,20 @@
+use leptos::*;
+
+#[component]
+pub fn ChevronRightIcon(
+    #[prop(optional, default = "w-full h-full".to_string())] classes: String,
+) -> impl IntoView {
+    view! {
+        <svg
+            class=format!("{}", classes)
+            viewBox="0 0 30 30"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M12.1224 24.0156C11.7522 24.3858 11.1518 24.3858 10.7815 24.0156V24.0156C10.4113 23.6453 10.4113 23.0449 10.7815 22.6746L17.891 15.5652L10.7815 8.45569C10.4113 8.08541 10.4113 7.48507 10.7815 7.11479V7.11479C11.1518 6.74451 11.7522 6.74451 12.1224 7.11479L19.8657 14.8581C20.2562 15.2486 20.2562 15.8818 19.8657 16.2723L12.1224 24.0156Z"
+                fill="currentColor"
+            />
+        </svg>
+    }
+}
diff --git a/ssr/src/component/icons/close_icon.rs b/ssr/src/component/icons/close_icon.rs
@@ -0,0 +1,20 @@
+use leptos::*;
+
+#[component]
+pub fn CloseIcon(
+    #[prop(optional, default = "w-full h-full".to_string())] classes: String,
+) -> impl IntoView {
+    view! {
+        <svg
+            class=format!("{}", classes)
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M20.7457 3.32851C20.3552 2.93798 19.722 2.93798 19.3315 3.32851L12.0371 10.6229L4.74275 3.32851C4.35223 2.93798 3.71906 2.93798 3.32854 3.32851C2.93801 3.71903 2.93801 4.3522 3.32854 4.74272L10.6229 12.0371L3.32856 19.3314C2.93803 19.722 2.93803 20.3551 3.32856 20.7457C3.71908 21.1362 4.35225 21.1362 4.74277 20.7457L12.0371 13.4513L19.3315 20.7457C19.722 21.1362 20.3552 21.1362 20.7457 20.7457C21.1362 20.3551 21.1362 19.722 20.7457 19.3315L13.4513 12.0371L20.7457 4.74272C21.1362 4.3522 21.1362 3.71903 20.7457 3.32851Z"
+                fill="currentColor"
+            />
+        </svg>
+    }
+}
diff --git a/ssr/src/component/icons/mod.rs b/ssr/src/component/icons/mod.rs
@@ -0,0 +1,6 @@
+pub mod arrow_down_icon;
+pub mod arrow_right_long_icon;
+pub mod chevron_left_icon;
+pub mod chevron_right_icon;
+pub mod close_icon;
+pub mod wallet_icon;
diff --git a/ssr/src/component/icons/wallet_icon.rs b/ssr/src/component/icons/wallet_icon.rs
@@ -0,0 +1,23 @@
+use leptos::*;
+
+#[component]
+pub fn WalletIcon(
+    #[prop(optional, default = "w-full h-full".to_string())] classes: String,
+) -> impl IntoView {
+    view! {
+        <svg
+            class=format!("{}", classes)
+            viewBox="0 0 18 19"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M10.6341 2.82015C9.9834 1.94194 8.70273 1.69553 7.758 2.38834L3.83204 5.26737C2.60119 5.56719 1.6875 6.67693 1.6875 8.00007V14.0001C1.6875 15.5534 2.9467 16.8126 4.5 16.8126H13.5C15.0533 16.8126 16.3125 15.5534 16.3125 14.0001V13.3599C17.1782 13.1151 17.8125 12.3192 17.8125 11.3751C17.8125 10.431 17.1782 9.63506 16.3125 9.39021V8.00007C16.3125 6.89468 15.6748 5.93823 14.7472 5.47854L13.9819 3.56533C13.4853 2.32363 11.9564 1.87568 10.8681 2.653L10.6341 2.82015ZM5.84324 5.18757H7.31974L9.71767 3.47477C9.41811 3.0895 8.84653 2.98516 8.42328 3.29554L5.84324 5.18757ZM11.522 3.56845C12.0167 3.21512 12.7116 3.41874 12.9374 3.98314L13.4192 5.18757H9.25526L11.522 3.56845ZM15.1875 13.4376H14.25C13.1109 13.4376 12.1875 12.5142 12.1875 11.3751C12.1875 10.236 13.1109 9.31257 14.25 9.31257H15.1875V8.00007C15.1875 7.06809 14.432 6.31257 13.5 6.31257H4.5C3.56802 6.31257 2.8125 7.06809 2.8125 8.00007V14.0001C2.8125 14.9321 3.56802 15.6876 4.5 15.6876H13.5C14.432 15.6876 15.1875 14.9321 15.1875 14.0001V13.4376ZM14.25 10.4376C13.7322 10.4376 13.3125 10.8573 13.3125 11.3751C13.3125 11.8928 13.7322 12.3126 14.25 12.3126H15.75C16.2678 12.3126 16.6875 11.8928 16.6875 11.3751C16.6875 10.8573 16.2678 10.4376 15.75 10.4376H14.25Z"
+                fill="currentColor"
+                style="fill:#A0A1A6;fill:color(display-p3 0.6275 0.6314 0.6510);fill-opacity:1;"
+            />
+        </svg>
+    }
+}
diff --git a/ssr/src/component/mod.rs b/ssr/src/component/mod.rs
@@ -3,6 +3,7 @@ pub mod auth_providers;
 pub mod back_btn;
 pub mod base_route;
 pub mod bullet_loader;
+pub mod buttons;
 pub mod canisters_prov;
 pub mod coming_soon;
 pub mod connect;
@@ -11,6 +12,7 @@ pub mod dashbox;
 pub mod feed_popup;
 pub mod hn_icons;
 pub mod ic_symbol;
+pub mod icons;
 pub mod infinite_scroller;
 pub mod loading;
 pub mod login_modal;