Switch

1"use client"23import { createSignal } from "@barefootjs/dom"4import { Switch } from "@/components/ui/switch"56export function SwitchConsentDemo() {7  const [accepted, setAccepted] = createSignal(false)89  const handleLabelClick = () => {10    setAccepted(!accepted())11  }1213  return (14    <div className="space-y-4">15      <div className="flex items-start space-x-2">16        <Switch checked={accepted()} onCheckedChange={setAccepted} class="mt-px" />17        <div18          className="grid gap-1.5 leading-none cursor-pointer select-none"19          onClick={handleLabelClick}20        >21          <span className="text-sm font-medium leading-none">22            Accept analytics cookies23          </span>24          <p className="text-sm text-muted-foreground">25            Help us improve by allowing anonymous usage data collection.26          </p>27        </div>28      </div>29      <button30        className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50"31        disabled={!accepted()}32      >33        Save preferences34      </button>35    </div>36  )37}

1"use client"23import { createSignal } from "@barefootjs/dom"4import { Switch } from "@/components/ui/switch"56export function SwitchFormDemo() {7  const [push, setPush] = createSignal(true)8  const [emailDigest, setEmailDigest] = createSignal(false)9  const [marketing, setMarketing] = createSignal(false)1011  return (12    <div className="space-y-4">13      <div className="space-y-4">14        <h4 className="text-sm font-medium leading-none">Notifications</h4>15        <p className="text-sm text-muted-foreground">16          Configure how you receive notifications.17        </p>18        <div className="flex flex-col space-y-3">19          <div className="flex items-center justify-between">20            <span className="text-sm font-medium leading-none">Push notifications</span>21            <Switch checked={push()} onCheckedChange={setPush} />22          </div>23          <div className="flex items-center justify-between">24            <span className="text-sm font-medium leading-none">Email digest</span>25            <Switch checked={emailDigest()} onCheckedChange={setEmailDigest} />26          </div>27          <div className="flex items-center justify-between">28            <span className="text-sm font-medium leading-none">Marketing emails</span>29            <Switch checked={marketing()} onCheckedChange={setMarketing} />30          </div>31        </div>32      </div>33      <div className="text-sm text-muted-foreground pt-2 border-t">34        Enabled: {[push() && 'Push notifications', emailDigest() && 'Email digest', marketing() && 'Marketing emails']35          .filter(Boolean).join(', ') || 'None'}36      </div>37    </div>38  )39}

1"use client"23import { createSignal, createMemo } from "@barefootjs/dom"4import { Switch } from "@/components/ui/switch"56const channels = [7  { id: 0, name: 'Email', description: 'Receive notifications via email' },8  { id: 1, name: 'Push', description: 'Browser push notifications' },9  { id: 2, name: 'SMS', description: 'Text message alerts' },10]1112export function SwitchNotificationDemo() {13  const [enabled, setEnabled] = createSignal(channels.map(() => false))1415  const enabledCount = createMemo(() => enabled().filter(Boolean).length)16  const isAllEnabled = createMemo(() => enabledCount() === channels.length)17  const selectionLabel = createMemo(() =>18    enabledCount() > 0 ? `${enabledCount()} enabled` : 'Enable all'19  )2021  const toggleChannel = (index: number) => {22    setEnabled(prev => prev.map((v, i) => i === index ? !v : v))23  }2425  const toggleAll = (value: boolean) => {26    setEnabled(prev => prev.map(() => value))27  }2829  return (30    <div className="w-full max-w-md">31      <div className="flex items-center justify-between px-3 py-2 border-b">32        <div className="flex items-center gap-3">33          <Switch checked={isAllEnabled()} onCheckedChange={toggleAll} />34          <span className="text-sm text-muted-foreground">{selectionLabel()}</span>35        </div>36      </div>37      <div className="divide-y border-x border-b rounded-b-md">38        {channels.map((channel) => (39          <div key={channel.id} className="flex items-center justify-between px-3 py-3">40            <div className="space-y-0.5">41              <span className="text-sm font-medium">{channel.name}</span>42              <p className="text-xs text-muted-foreground">{channel.description}</p>43            </div>44            <Switch checked={enabled()[channel.id]} onCheckedChange={() => toggleChannel(channel.id)} />45          </div>46        ))}47      </div>48    </div>49  )50}