Setting

import Heading from '@/components/ui/Heading';
import Switch from '@/components/ui/Switch';
import Divider from '@/components/ui/Divider';
import { RadioGroup, RadioCard } from '@/components/ui/RadioGroup';
import Select from '@/components/ui/Select';
import { cva } from 'class-variance-authority';
import Link from '@/components/ui/Link';

const liItem = cva('flex items-center justify-between list-none');

export default function Page() {
  return (
    <div className="relative mx-auto max-w-xl px-4 py-10 md:py-20">
      <Heading as="h2">Notification</Heading>
      <ul className="mt-4 space-y-6">
        <li className={liItem()}>
          <p>General email notifications</p>
          <Switch size="sm" defaultChecked />
        </li>
        <li className={liItem()}>
          <p>Notify only responded "Yes"</p>
          <Switch size="sm" />
        </li>
        <li className={liItem()}>
          <p>Notification sound</p>
          <Switch size="sm" defaultChecked />
        </li>
        <li className={liItem()}>
          <p>Email for weekly report</p>
          <Switch size="sm" defaultChecked />
        </li>
      </ul>
      <Divider className="my-8" />
      <div className="space-y-6">
        <RadioGroup defaultValue="desktop-notice" className="grid grid-cols-3">
          <RadioCard value="desktop-notice" className="text-sm md:text-base">
            Desktop Notification
          </RadioCard>
          <RadioCard value="alert" className="text-sm md:text-base">
            Alert
          </RadioCard>
          <RadioCard value="Off" className="text-sm md:text-base">
            Off
          </RadioCard>
        </RadioGroup>
        <div className="space-y-6">
          <p className="text-description mb-3 text-sm">Show snoozed notification</p>
          <Select
            defaultValue="never"
            className="min-w-40"
            items={[
              { id: 'never', label: 'Never', value: 'never' },
              { id: '5m', label: '5 minutes', value: '5m' },
              { id: '10m', label: '10 minutes', value: '10m' },
              { id: '15m', label: '15 minutes', value: '15m' },
            ]}
          />
        </div>
        <div className="space-y-4">
          <p className="text-description mb-3 text-sm">Notice Event</p>
          <div className="grid grid-cols-3 gap-2.5">
            <Select
              defaultValue="sound"
              items={[
                { id: 'sound', label: 'sound', value: 'sound' },
                { id: 'flash', label: 'flash', value: 'flash' },
                { id: 'system', label: 'system', value: 'system' },
              ]}
            />
            <Select
              defaultValue="10"
              items={[
                { id: '10', label: '10', value: '10' },
                { id: '20', label: '20', value: '20' },
                { id: '30', label: '30', value: '30' },
                { id: '40', label: '40', value: '40' },
                { id: '50', label: '50', value: '50' },
                { id: '60', label: '60', value: '60' },
              ]}
            />
            <Select
              defaultValue="minute"
              items={[
                { id: 'minute', label: 'Minute', value: 'minute' },
                { id: 'hour', label: 'Hour', value: 'hour' },
              ]}
            />
          </div>
        </div>
      </div>
      <Heading as="h2" className="mt-12 mb-4">
        System Notification
      </Heading>
      <div className="mb-4 space-y-2">
        <p className="text-sm font-semibold">Desktop notification</p>
        <div className="text-description text-sm">Calendar desktop notification have been allowed in the system's "Settings" and showing "Banners" should be enabled to see them on the screen.</div>
        <Link href="#" className="text-sm" underline>
          System settings
        </Link>
      </div>
      <div className="space-y-2">
        <p className="text-sm font-semibold">Desktop notification</p>
        <div className="text-description text-sm">Default event reminder are configured per calendar. Navigate to "Settings for my calendar" {'>'} "Event notification."</div>
        <Link href="#" className="text-sm" underline>
          Google calendar settings
        </Link>
      </div>
    </div>
  );
}

import { IconCheck, IconArrowBack } from '@tabler/icons-react';
import { Card, CardBody, CardFooter, CardHeader, CardTitle } from '@/components/ui/Card';
import { RadioCard, RadioGroup } from '@/components/ui/RadioGroup';
import Select from '@/components/ui/Select';
import Switch from '@/components/ui/Switch';
import Image from 'next/image';
import Button from '@/components/ui/Button';
import { cn } from '@/lib/utils';
export default function Page() {
  return (
    <div className="relative flex min-h-screen items-center justify-center px-4 py-10">
      <Card className="md:w-140">
        <CardHeader className="h-16">
          <CardTitle>Appearance Settings</CardTitle>
        </CardHeader>
        <CardBody className="pt-0">
          <div className="border-line flex items-center justify-between border-y py-4">
            <Label title="Language" description="Select the language of the platform" />
            <Select
              className="w-26"
              defaultValue="en"
              items={[
                { id: 'en', label: 'English', value: 'en' },
                { id: 'fr', label: 'French', value: 'fr' },
                { id: 'de', label: 'German', value: 'de' },
              ]}
            />
          </div>
          <div className="border-line border-b pt-4 pb-10.5">
            <Label title="Interface Theme" description="Customize the application theme" className="mb-2" />
            <ThemeGroup defaultValue="auto" />
          </div>
          <div className="border-line flex items-center justify-between border-b py-4">
            <Label title="Accent Color" description="Select your application accent color" />
            <RadioGroup defaultValue="violet-700">
              <RadioCard value="violet-700" className="relative flex size-5 items-center justify-center rounded-full p-0">
                <div className="size-[90%] rounded-full bg-violet-700"></div>
              </RadioCard>
              <RadioCard value="sky-700" className="relative flex size-5 items-center justify-center rounded-full p-0">
                <div className="size-[90%] rounded-full bg-sky-700"></div>
              </RadioCard>
              <RadioCard value="amber-700" className="relative flex size-5 items-center justify-center rounded-full p-0">
                <div className="size-[90%] rounded-full bg-amber-700"></div>
              </RadioCard>
              <RadioCard value="rose-700" className="relative flex size-5 items-center justify-center rounded-full p-0">
                <div className="size-[90%] rounded-full bg-rose-700"></div>
              </RadioCard>
            </RadioGroup>
          </div>
          <div className="border-line flex items-center justify-between border-b py-4">
            <Label title="Blur sidebar" description="add a blur effect to the sidebar" />
            <Switch />
          </div>
        </CardBody>
        <CardFooter className="grid-row-2 grid gap-4 md:flex md:flex-row md:justify-between">
          <Button colors="neutral" variant="light" className="row-start-2 gap-1 md:row-start-1">
            Reset to default
            <IconArrowBack size={18} />
          </Button>
          <div className="row-star-1 grid flex-col-reverse gap-2 md:row-start-2 md:flex md:flex-row">
            <Button colors="neutral">Cancel</Button>
            <Button colors="primary">Save preferences</Button>
          </div>
        </CardFooter>
      </Card>
    </div>
  );
}

function Label({ title, description, className }: { title: string; description?: string; className?: string }) {
  return (
    <div className={cn('space-y-1', className)}>
      <p className="font-semibold">{title}</p>
      <p className="text-description text-sm">{description}</p>
    </div>
  );
}

function ThemeGroup({ defaultValue }: { defaultValue?: 'auto' | 'light' | 'dark' }) {
  return (
    <RadioGroup defaultValue={defaultValue} className="gap-1.5 md:gap-2.5">
      <RadioCard className="group relative min-h-20" value="auto">
        <Image src="/images/appearance-auto.png" alt="auto theme" width={1280} height={826} className="aspect-[3/2] w-full min-w-22 rounded-sm object-fill" />
        <p className="absolute -bottom-7 text-sm">Auto</p>
        <div className={cn('bg-primary absolute bottom-3 left-3 flex size-5 items-center justify-center rounded-full opacity-0 transition group-data-[state=checked]:opacity-100')}>
          <IconCheck size={16} />
        </div>
      </RadioCard>
      <RadioCard className="group relative min-h-20" value="light">
        <Image src="/images/appearance-light.png" alt="light theme" width={1280} height={826} className="aspect-[3/2] w-full min-w-22 rounded-sm" />
        <p className="absolute -bottom-7 text-sm">Light</p>
        <div className={cn('bg-primary absolute bottom-3 left-3 flex size-5 items-center justify-center rounded-full opacity-0 transition group-data-[state=checked]:opacity-100')}>
          <IconCheck size={16} />
        </div>
      </RadioCard>
      <RadioCard className="group relative min-h-20" value="dark">
        <Image src="/images/appearance-dark.png" alt="light theme" width={1280} height={826} className="aspect-[3/2] w-full min-w-22 rounded-sm" />
        <p className="absolute -bottom-7 text-sm">Dark</p>
        <div className={cn('bg-primary absolute bottom-3 left-3 flex size-5 items-center justify-center rounded-full opacity-0 transition group-data-[state=checked]:opacity-100')}>
          <IconCheck size={16} />
        </div>
      </RadioCard>
    </RadioGroup>
  );
}