feat: add layout center

afeiship · afeiship · commit 6d0b64ec328e · 2024-04-28T21:29:03.000+08:00
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@jswork/presets-tailwind": "^1.0.28",
+    "@jswork/presets-tailwind": "^1.0.30",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,6 +4,8 @@ import ChildVariant from './components/child-variant';
 import TwSubChild from './components/tw-sub-child';
 import FlexGap from './components/flex-gap';
 import LayoutTrbla from './components/layout-trbla.tsx';
+import LayoutAbsCenter from './components/layout-abs-center.tsx';
+import LayoutTranslateCenter from './components/layout-translate-center.tsx';
 
 function App() {
   return (
@@ -37,6 +39,10 @@ function App() {
       <FlexGap />
       <hr />
       <LayoutTrbla />
+      <hr />
+      <LayoutAbsCenter />
+      <hr />
+      <LayoutTranslateCenter />
     </div>
   );
 }
diff --git a/src/components/layout-abs-center.tsx b/src/components/layout-abs-center.tsx
@@ -0,0 +1,14 @@
+/**
+ * @email: aric.zheng@alo7.com
+ * @description: A React page component.
+ * @created_at: 2024-04-28 21:08:01
+ */
+
+export default () => {
+  return (
+    <div className="debug-red relative block size-80">
+      <h1>Layout Absolute Center</h1>
+      <div className="layout-abs-center absolute size-12 rounded bg-amber-300"></div>
+    </div>
+  );
+};
diff --git a/src/components/layout-translate-center.tsx b/src/components/layout-translate-center.tsx
@@ -0,0 +1,23 @@
+/**
+ * @email: aric.zheng@alo7.com
+ * @description: A React page component.
+ * @created_at: 2024-04-28 21:08:01
+ */
+
+export default () => {
+  return (
+    <>
+      <div className="debug-red relative block size-80">
+        <h1>Dialog center</h1>
+        <div className="layout-translate-center absolute size-16 rounded-xl bg-green-400"></div>
+      </div>
+      <div className="debug-red relative block size-80">
+        <h1>Layout Translate Center</h1>
+        <div className="layout-translate-center absolute size-16 rounded-xl bg-green-400"></div>
+        <div className="layout-translate-center-xy absolute size-16 rounded-xl bg-amber-400"></div>
+        <div className="layout-translate-center-y absolute size-16 rounded-full bg-blue-400"></div>
+        <div className="layout-translate-center-x absolute top-0 size-16 rounded-3xl bg-red-400"></div>
+      </div>
+    </>
+  );
+};
