First Commit

2024-10-16 15:20:34 +01:00
commit 25daf1844e
30 changed files with 617 additions and 0 deletions
@@ -0,0 +1,19 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+import Toggle, { TWUI_TOGGLE_PROPS } from "./Toggle";
+
+export default function ColorSchemeSelector({
+    toggleProps,
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    toggleProps?: TWUI_TOGGLE_PROPS;
+}) {
+    return (
+        <div
+            {...props}
+            className={twMerge("flex flex-row items-center", props.className)}
+        >
+            <Toggle {...toggleProps} />
+        </div>
+    );
+}
@@ -0,0 +1,47 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
+    HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+> & {
+    active?: boolean;
+    circleProps?: DetailedHTMLProps<
+        HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    >;
+};
+
+/**
+ * # Toggle Component
+ * @className_wrapper twui-toggle-wrapper
+ * @className_circle twui-toggle-circle
+ */
+export default function Toggle({
+    circleProps,
+    active,
+    ...props
+}: TWUI_TOGGLE_PROPS) {
+    return (
+        <div
+            {...props}
+            className={twMerge(
+                "flex flex-row items-center w-full max-w-[200px]",
+                "border border-slate-300 border-solid rounded-full",
+                active ? "" : "",
+                "twui-toggle-wrapper",
+                props.className
+            )}
+        >
+            <div
+                {...circleProps}
+                className={twMerge(
+                    "w-20 h-20 rounded-full",
+                    active ? "" : "",
+                    "twui-toggle-circle",
+                    circleProps?.className
+                )}
+            ></div>
+        </div>
+    );
+}