import { Switch } from '@tremor/react';
export function SwitchHero() {  return (    <div className="mx-auto flex items-center justify-center">      <Switch />    </div>  );}

import { Button, Card, Switch, Text, Title } from '@tremor/react';import React from 'react';
export function SwitchUsageExampleWithControlled() {  const [isSwitchOn, setIsSwitchOn] = React.useState<boolean>(false);
  const handleSwitchChange = (value: boolean) => {    setIsSwitchOn(value);  };  return (    <Card className="mx-auto max-w-md">      <h3 className="text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">Unlock the full potential</h3>      <p className="mt-1 leading-6 text-tremor-default text-tremor-content dark:text-dark-tremor-content">        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy        eirmod tempor invidunt.      </p>      <form        onSubmit={(e) => {          e.preventDefault();          alert('Submitted: ' + isSwitchOn);        }}        method="post"        className="mt-6 grid gap-y-6"      >        <div className="flex items-center space-x-3">          <Switch            id="switch"            name="switch"            checked={isSwitchOn}            onChange={handleSwitchChange}          />          <label htmlFor="switch" className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">            Activate Tremor Pro for{' '}            <span className="font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">$20/month</span>          </label>        </div>        <Button type="submit" className="w-full" disabled={!isSwitchOn}>          Submit        </Button>      </form>    </Card>  );}