mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-12 23:33:43 +08:00
kuekhaoyang
1439a15d22
- Added Danmaku settings including API URL, opacity, font size, and display area to PlayerSettings. - Improved button styles and transitions across various UI components for better user experience. - Updated BackToTop, Badge, Button, Card, ConfirmDialog, Input, ModalBackdrop, ModalHeader, SegmentedControl, and Switch components for consistency with Liquid Glass design. - Adjusted package versions in package.json and package-lock.json to reflect version 4.5.0.
61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Switch - A reusable toggle switch component
|
|
* Following Liquid Glass design system
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
interface SwitchProps {
|
|
checked: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
ariaLabel?: string;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function Switch({
|
|
checked,
|
|
onChange,
|
|
ariaLabel,
|
|
className = "",
|
|
disabled = false,
|
|
}: SwitchProps) {
|
|
return (
|
|
<label
|
|
className={`
|
|
switch relative inline-flex items-center cursor-pointer
|
|
h-[30px] w-[50px] shrink-0
|
|
${disabled ? 'opacity-50 cursor-not-allowed' : ''}
|
|
${className}
|
|
`}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
className="sr-only peer"
|
|
checked={checked}
|
|
onChange={(e) => !disabled && onChange(e.target.checked)}
|
|
aria-label={ariaLabel}
|
|
disabled={disabled}
|
|
/>
|
|
<div
|
|
className={`
|
|
switch-slider w-full h-full rounded-[var(--radius-full)]
|
|
bg-[color-mix(in_srgb,var(--text-color)_20%,transparent)]
|
|
peer-checked:bg-[var(--accent-color)]
|
|
transition-colors duration-[0.4s] cubic-bezier(0.2,0.8,0.2,1)
|
|
before:content-[''] before:absolute before:h-[26px] before:w-[26px]
|
|
before:left-[2px] before:bottom-[2px]
|
|
before:bg-white before:rounded-[var(--radius-full)]
|
|
before:transition-transform before:duration-[0.4s]
|
|
before:cubic-bezier(0.2,0.8,0.2,1)
|
|
before:shadow-[0_1px_3px_rgba(0,0,0,0.2)]
|
|
peer-checked:before:translate-x-[20px]
|
|
active:before:scale-95
|
|
`}
|
|
></div>
|
|
</label>
|
|
);
|
|
}
|