Initial commit

Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>

src/components/mod.rs

@@ -0,0 +1,99 @@
+use dioxus::prelude::*;
+
+#[derive(PartialEq, Props, Clone)]
+pub struct PProps {
+    #[props(default = "".to_string())]
+    pub class: String,
+    pub children: Element,
+}
+
+#[component]
+pub fn P(props: PProps) -> Element {
+    rsx! {
+        div {
+            class: "{props.class}",
+            p {
+                class: "mb-2 font-normal text-gray-900 dark:text-white",
+                {props.children}
+            },
+        }
+    }
+}
+
+#[component]
+pub fn H1(props: PProps) -> Element {
+    rsx! {
+        div {
+            class: "{props.class}",
+            h1 {
+                class: "mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-6xl",
+                span {
+                    class: "text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400",
+                    {props.children}
+                }
+            }
+        }
+    }
+}
+
+pub fn H4(props: PProps) -> Element {
+    rsx! {
+        div {
+            class: "{props.class}",
+            class: "mb-4",
+            h3 {
+                class: "text-lg uppercase text-cyan-600 dark:text-cyan-400 tracking-widest mb-4 font-bold",
+                {props.children}
+            }
+        }
+    }
+}
+
+#[component]
+pub fn H5(props: PProps) -> Element {
+    rsx! {
+        div {
+            class: "{props.class}",
+            h5 {
+                class: "mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white",
+                {props.children}
+            }
+        }
+    }
+}
+
+#[derive(PartialEq, Props, Clone)]
+pub struct CardProp {
+    #[props(default = "".to_string())]
+    class: String,
+    children: Element,
+}
+
+pub fn Card(prop: CardProp) -> Element {
+    rsx! {
+        div {
+            class: "flex flex-col py-10 items-center min-w-fit",
+            div {
+                class: "text-white bg-gradient-to-r from-purple-500 to-blue-500 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 rounded-lg px-5 py-2.5 min-w-fit max-w-8 center",
+                { prop.children }
+            }
+        }
+    }
+}
+
+pub fn UnderConstruction() -> Element {
+    rsx! {
+        div {
+            class:"rounded flex justify-between w-full p-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600 m-16",
+            div {
+                class:"flex items-center mx-auto",
+                p {
+                    class:"flex items-center text-sm font-normal text-gray-500 dark:text-gray-400",
+                    span {
+                        "This site is currenlty under construction",
+                    }
+                }
+            }
+        }
+    }
+}