calcom/packages/ui/Switch.tsx
Hariom Balhara 174ed9f6d1
Embed Snippet Generator (#2597)
* Add support to dynamically change the theme

* Add Embed UI in app

* Update UI as per Figma

* Dynamicaly update Embed Code

* Get differnet modes working in preview

* Support Embed on EventType Edit, Team Link Fix and Mobile unsupported

* Fix auto theme switch in Embed Snippet generator

* Fix types

* Self Review fixes

* Remove Embed from App section

* Move get query after the middleware to let middleware work on it

* Add sandboxes in the document

* Add error handling for embed loading

* Fix types

* Update snapshots and fix bug identified by tests

* UI Fixes

* Add Embed Tests

* Respond in preview to width and height

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-05-05 08:29:49 -06:00

33 lines
986 B
TypeScript

import { useId } from "@radix-ui/react-id";
import * as Label from "@radix-ui/react-label";
import * as PrimitiveSwitch from "@radix-ui/react-switch";
import React from "react";
const Switch = (
props: React.ComponentProps<typeof PrimitiveSwitch.Root> & {
label?: string;
}
) => {
const { label, ...primitiveProps } = props;
const id = useId();
return (
<div className="flex h-[20px] items-center">
<PrimitiveSwitch.Root className="h-[20px] w-[36px] rounded-sm bg-gray-400 p-0.5" {...primitiveProps}>
<PrimitiveSwitch.Thumb
id={id}
className={"block h-[16px] w-[16px] translate-x-0 bg-white transition-transform"}
/>
</PrimitiveSwitch.Root>
{label && (
<Label.Root
htmlFor={id}
className="cursor-pointer align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
{label}
</Label.Root>
)}
</div>
);
};
export default Switch;