refactor(infra): directory structure (#4615)

packages/frontend/component/src/ui/switch/index.css.ts

@@ -0,0 +1,45 @@
+import { style } from '@vanilla-extract/css';
+
+export const labelStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+  cursor: 'pointer',
+});
+export const inputStyle = style({
+  opacity: 0,
+  position: 'absolute',
+});
+export const switchStyle = style({
+  position: 'relative',
+  width: '46px',
+  height: '26px',
+  background: 'var(--affine-icon-color)',
+  borderRadius: '37px',
+  transition: '200ms all',
+  border: '1px solid var(--affine-black-10)',
+  boxShadow: 'var(--affine-toggle-circle-shadow)',
+  selectors: {
+    '&:before': {
+      transition: 'all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51)',
+      content: '""',
+      position: 'absolute',
+      width: '20px',
+      height: '20px',
+      borderRadius: '50%',
+      top: '50%',
+      border: '1px solid var(--affine-black-10)',
+      background: 'var(--affine-white)',
+      transform: 'translate(1px, -50%)',
+    },
+  },
+});
+export const switchCheckedStyle = style({
+  background: 'var(--affine-primary-color)',
+  selectors: {
+    '&:before': {
+      background: 'var(--affine-toggle-circle-background-color)',
+      transform: 'translate(21px,-50%)',
+    },
+  },
+});

packages/frontend/component/src/ui/switch/index.ts

@@ -0,0 +1 @@
+export * from './switch';

packages/frontend/component/src/ui/switch/switch.tsx

@@ -0,0 +1,53 @@
+// components/switch.tsx
+import clsx from 'clsx';
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  useCallback,
+  useState,
+} from 'react';
+
+import * as styles from './index.css';
+
+type SwitchProps = Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'> & {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  children?: ReactNode;
+};
+
+export const Switch = ({
+  checked: checkedProp = false,
+  onChange: onChangeProp,
+  children,
+  ...otherProps
+}: SwitchProps) => {
+  const [checkedState, setCheckedState] = useState(checkedProp);
+
+  const checked = onChangeProp ? checkedProp : checkedState;
+  const onChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newChecked = event.target.checked;
+      if (onChangeProp) onChangeProp(newChecked);
+      else setCheckedState(newChecked);
+    },
+    [onChangeProp]
+  );
+
+  return (
+    <label className={clsx(styles.labelStyle)} {...otherProps}>
+      {children}
+      <input
+        className={clsx(styles.inputStyle)}
+        type="checkbox"
+        value={checked ? 'on' : 'off'}
+        checked={checked}
+        onChange={onChange}
+      />
+      <span
+        className={clsx(styles.switchStyle, {
+          [styles.switchCheckedStyle]: checked,
+        })}
+      />
+    </label>
+  );
+};