chore: add toggle

src/components/Toggle.tsx

@@ -0,0 +1,32 @@
+interface ToggleProps {
+  value: boolean
+  onChange: (newValue: boolean) => void
+  icon: React.ReactNode
+  text: React.ReactNode
+  remark?: React.ReactNode
+}
+
+export default function Toggle({ value, onChange, icon, text, remark }: ToggleProps) {
+  const handleChange = () => {
+    onChange(!value);
+  };
+
+  return (
+    <label className="relative inline-block">
+      <input
+        type="checkbox"
+        checked={value}
+        onChange={handleChange}
+        className="hidden"
+      />
+      {/* <span >1</span> */}
+      <div className='flex flex-col items-center'>
+        <div className={`transition w-9 h-9 flex items-center justify-center rounded-full ${value?'bg-green-600 text-white':'bg-green-100 text-green-700'}`}>
+          {icon}
+        </div>
+        <div className='text-xs op80 mt-1.5'>{text}</div>
+        <div className='text-[0.6rem] op50 mt-0.5'>{remark?remark:value?'ON':'OFF'}</div>
+      </div>
+    </label>
+  )
+}

src/pages/tools/music.tsx

@@ -12,6 +12,7 @@ import {
 } from '@chakra-ui/react'
 import Cropper, { ReactCropperElement } from "react-cropper";
 import HighText from "../../components/HighText";
+import Toggle from "../../components/Toggle";
 import { useOutletContext } from "react-router-dom";
 import { ChangeEvent, RefObject, useState, useRef } from "react";
 import BaseCard from "../../components/BaseCard";
@@ -134,7 +135,7 @@ export default function Rseg() {
         <input type="range" value={progress} onChange={(v)=>setProgress(parseInt(v.target.value))
         } className="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer"/>
       </div>
-      <div className='mb-4'>
+      {/* <div className='mb-4'>
         <table className='mx-auto'>
           <tbody>
             <tr>
@@ -164,7 +165,14 @@ export default function Rseg() {
           </tbody>
         </table>
         
+      </div> */}
+      <div className='flex items-start justify-center gap-6 my-6'>
+        <Toggle value={bleedingLine} onChange={(v)=>setBleedingLine(v)} icon={<div className="i-ri-shape-2-line" />} text='出血线' remark='印刷需打开'></Toggle>
+        <Toggle value={isRounded} onChange={(v)=>setIsRounded(v)} icon={<div className="i-ri-rounded-corner" />} text='圆角'></Toggle>
+        <Toggle value={isSmall} onChange={(v)=>setIsSmall(v)} icon={<div className="i-ri-bug-line" />} text='修复模式' remark='修复图像缺失'></Toggle>
+        <Toggle value={tr} onChange={(v)=>setTr(v)} icon={<div className="i-ri-contrast-drop-fill" />} text='透明背景'></Toggle>
       </div>
+
       <div className='text-xs text-center mb-4 text-orange-600'>
         <span className='text-[0.7rem] text-white bg-orange-600 px-1 py-0.5 rounded mr-1'>提示</span>
         <span>歌词仅有一行时，比例才适用于冲印</span>