From 304519c693e34d996122aec9fc6c56e57c10ffca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BC=8A=E6=AC=A7?= <langyo.china@gmail.com>
Date: Thu, 31 Oct 2024 20:31:05 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Add=20some=20system=20components?=
 =?UTF-8?q?.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/container/system/breakpoint.rs        | 23 +++++++++++++++++++
 .../components/src/container/system/cursor.rs | 23 +++++++++++++++++++
 .../components/src/container/system/flex.rs   | 23 +++++++++++++++++++
 .../components/src/container/system/mod.rs    |  6 +++++
 packages/theme/src/prelude/material/mod.rs    |  1 +
 5 files changed, 76 insertions(+)
 create mode 100644 packages/components/src/container/system/breakpoint.rs
 create mode 100644 packages/components/src/container/system/cursor.rs
 create mode 100644 packages/components/src/container/system/flex.rs

diff --git a/packages/components/src/container/system/breakpoint.rs b/packages/components/src/container/system/breakpoint.rs
new file mode 100644
index 0000000..bcf5ce3
--- /dev/null
+++ b/packages/components/src/container/system/breakpoint.rs
@@ -0,0 +1,23 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[derive(Properties, Debug, PartialEq)]
+pub struct Props {
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[styled_component]
+pub fn Breakpoint(props: &Props) -> Html {
+    html! {
+        <div
+            class={css!(r#"
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            "#)}
+        >
+            {props.children.clone()}
+        </div>
+    }
+}
diff --git a/packages/components/src/container/system/cursor.rs b/packages/components/src/container/system/cursor.rs
new file mode 100644
index 0000000..784637e
--- /dev/null
+++ b/packages/components/src/container/system/cursor.rs
@@ -0,0 +1,23 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[derive(Properties, Debug, PartialEq)]
+pub struct Props {
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[styled_component]
+pub fn Cursor(props: &Props) -> Html {
+    html! {
+        <div
+            class={css!(r#"
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            "#)}
+        >
+            {props.children.clone()}
+        </div>
+    }
+}
diff --git a/packages/components/src/container/system/flex.rs b/packages/components/src/container/system/flex.rs
new file mode 100644
index 0000000..40659cc
--- /dev/null
+++ b/packages/components/src/container/system/flex.rs
@@ -0,0 +1,23 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+#[derive(Properties, Debug, PartialEq)]
+pub struct Props {
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[styled_component]
+pub fn Flex(props: &Props) -> Html {
+    html! {
+        <div
+            class={css!(r#"
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            "#)}
+        >
+            {props.children.clone()}
+        </div>
+    }
+}
diff --git a/packages/components/src/container/system/mod.rs b/packages/components/src/container/system/mod.rs
index 0fa2161..1df33ad 100644
--- a/packages/components/src/container/system/mod.rs
+++ b/packages/components/src/container/system/mod.rs
@@ -1,9 +1,15 @@
+mod breakpoint;
+mod cursor;
 mod draggable;
+mod flex;
 mod modal;
 mod resizable;
 mod scrollable;
 
+pub use breakpoint::Breakpoint;
+pub use cursor::Cursor;
 pub use draggable::Draggable;
+pub use flex::Flex;
 pub use modal::Modal;
 pub use resizable::Resizable;
 pub use scrollable::Scrollable;
diff --git a/packages/theme/src/prelude/material/mod.rs b/packages/theme/src/prelude/material/mod.rs
index 32ece26..e4cc52d 100644
--- a/packages/theme/src/prelude/material/mod.rs
+++ b/packages/theme/src/prelude/material/mod.rs
@@ -1 +1,2 @@
 // https://m3.material.io/components/
+// https://vuetifyjs.com/zh-Hans/