Switch

"use client"

import { Switch } from "@/components/jk/switch"


export const SwitchDemo = () => {
    return (
        <>
            <div className="flex flex-col gap-3">
                <Switch name="switch_1" id="switch_1"
                    indicatorClassName="[--switch-bg:var(--color-bg-muted)] [--switch-bg-selected:var(--color-primary)] [--knob-bg:var(--color-white)]">
                    Switch 1
                </Switch>
                <Switch name="switch_def2" id="switch_def2"
                    indicatorClassName="[--switch-bg:var(--color-bg-muted)] [--switch-bg-selected:var(--color-bg-muted)] [--knob-bg:var(--color-fg-title)]">
                    Switch 2
                </Switch>
                <Switch name="switch_def3" id="switch_def3"
                    indicatorClassName="[--switch-bg:var(--color-bg-muted)] [--switch-bg-selected:var(--color-fg-title)] [--knob-bg:var(--color-bg)]">
                    Switch 3
                </Switch>
            </div>

        </>
    )
}

// import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Description } from "@/components/jk/input"
import { Switch, SwitchLabel } from "@/components/jk/switch"

export const SwitchAdvanced = () => {
    return (
        <div className="flex flex-col gap-4">
            <Switch value="profileVisible" indicatorClassName="[--switch-bg:var(--color-bg-muted)] [--switch-bg-selected:var(--color-primary)] [--knob-bg:var(--color-white)]">
                <SwitchLabel>Public profile</SwitchLabel>
                <Description>Allow others to see your profile.</Description>
            </Switch>
            <Switch value="searchEngineIndexing" indicatorClassName="[--switch-bg:var(--color-bg-muted)] [--switch-bg-selected:var(--color-primary)] [--knob-bg:var(--color-white)]">
                <SwitchLabel>Search engine indexing</SwitchLabel>
                <Description>Allow search engines to index your profile.</Description>
            </Switch>
            <Switch defaultSelected value="twoFactor" indicatorClassName="[--switch-bg:var(--color-bg-muted)] [--switch-bg-selected:var(--color-primary)] [--knob-bg:var(--color-white)]">
                <SwitchLabel>Two-factor authentication</SwitchLabel>
                <Description>Add an extra layer of security to your account.</Description>
            </Switch>
            <Switch value="activityStatus" indicatorClassName="[--switch-bg:var(--color-bg-muted)] [--switch-bg-selected:var(--color-primary)] [--knob-bg:var(--color-white)]">
                <SwitchLabel>Show activity status</SwitchLabel>
                <Description>Let others see when you&apos;re online.</Description>
            </Switch>
        </div>
    )
}

"use client"

import { Description } from '@/components/jk/input'
import { Switch, SwitchIndicator, SwitchLabel } from '@/components/jk/switch'

export const SwitchCompose = () => {
  return (
    <Switch composeAll className="ui-card rounded-ui [--card-padding:--spacing(2.5)] [--card-radius:--radius-ui] bg-bg-surface flex items-center gap-3">
      <div className="inner-radius bg-bg shadow-sm size-10 text-xl d-flex-place-center">
        <span aria-hidden="true" className="flex iconify ph--globe" />
      </div>
      <div className="flex items-center gap-4 flex-1">
        <div className="flex flex-col flex-1">
          <SwitchLabel className="font-semibold text-fg-title">Public access</SwitchLabel>
          <Description className="text-fg-muted text-xs sm:text-sm line-clamp-1">
            Publish and share link with anyone
          </Description>
        </div>
        <div className="w-max min-w-max flex">
          <SwitchIndicator className="[--switch-bg:var(--color-bg-muted)] [--switch-bg-selected:var(--color-primary)] [--knob-bg:var(--color-white)]"/>  
        </div>
      </div>
    </Switch>
  )
}