mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
const App = `import {Switch, cn} from "@nextui-org/react";
|
|
|
|
export default function App() {
|
|
return (
|
|
<Switch
|
|
classNames={{
|
|
base: cn(
|
|
"inline-flex flex-row-reverse w-full max-w-md bg-content1 hover:bg-content2 items-center",
|
|
"justify-between cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
|
|
"data-[selected=true]:border-primary",
|
|
),
|
|
wrapper: "p-0 h-4 overflow-visible",
|
|
thumb: cn("w-6 h-6 border-2 shadow-lg",
|
|
"group-data-[hover=true]/toggle:border-primary",
|
|
//selected
|
|
"group-data-[selected=true]/toggle:ml-6",
|
|
// pressed
|
|
"group-data-[pressed=true]/toggle:w-7",
|
|
"group-data-[selected]:group-data-[pressed]/toggle:ml-4",
|
|
),
|
|
}}
|
|
>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-medium">Enable early access</p>
|
|
<p className="text-tiny text-default-400">
|
|
Get access to new features before they are released.
|
|
</p>
|
|
</div>
|
|
</Switch>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|