first commit

calcom/packages/features/settings/ThemeLabel.tsx

@@ -0,0 +1,37 @@
+interface ThemeLabelProps {
+  variant: "light" | "dark" | "system";
+  value?: "light" | "dark" | null;
+  label: string;
+  defaultChecked?: boolean;
+  register: any;
+  fieldName?: string;
+}
+
+export default function ThemeLabel(props: ThemeLabelProps) {
+  const { variant, label, value, defaultChecked, register, fieldName = "theme" } = props;
+
+  return (
+    <label
+      className="relative mb-4 flex-1 cursor-pointer text-center last:mb-0 last:mr-0 sm:mb-0 sm:mr-4"
+      htmlFor={`${fieldName}-${variant}`}
+      data-testid={`${fieldName}-${variant}`}>
+      <input
+        className="peer absolute left-8 top-8"
+        type="radio"
+        value={value}
+        id={`${fieldName}-${variant}`}
+        defaultChecked={defaultChecked}
+        {...register(fieldName)}
+      />
+      <div className="ring-inverted relative z-10 rounded-lg ring-offset-2 transition-all peer-checked:ring-2">
+        <img
+          aria-hidden="true"
+          className="cover w-full rounded-lg"
+          src={`/theme-${variant}.svg`}
+          alt={`theme ${variant}`}
+        />
+      </div>
+      <p className="peer-checked:text-emphasis text-default mt-2 text-sm font-medium">{label}</p>
+    </label>
+  );
+}