feat: GUI 配置支持添加和减少 LED。

src/App.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
-import reactLogo from './assets/react.svg';
+import tw from 'twin.macro';
 import { invoke } from '@tauri-apps/api/tauri';
 import './App.css';
 import clsx from 'clsx';
 import { Configurator } from './configurator/configurator';
+import { ButtonSwitch } from './commons/components/button';
 
 type Mode = 'Flowing' | 'Follow' | null;
 
@@ -39,63 +40,30 @@ function App() {
 
   return (
     <div>
-      <div className="flex justify-between">
+      <div tw="flex justify-between">
         {ledStripColors.map((it) => (
-          <span className=" h-8 flex-auto" style={{ backgroundColor: it }}></span>
+          <span tw="h-8 flex-auto" style={{ backgroundColor: it }}></span>
         ))}
       </div>
 
-      <div className="flex gap-1 justify-center w-screen overflow-hidden">
+      <div tw="flex gap-1 justify-center w-screen overflow-hidden">
         {screenshots.map((screenshot) => (
-          <div className="flex-auto">
+          <div tw="flex-auto">
             <img src={screenshot} />
           </div>
         ))}
       </div>
 
-      <div className="flex gap-5 justify-center ">
-        <button
-          className="bg-black bg-opacity-20"
-          type="button"
-          onClick={() => readPickerConfig()}
-        >
-          Refresh Displays
-        </button>
-        <button
-          className="bg-black bg-opacity-20"
-          type="button"
-          onClick={() => takeSnapshot()}
-        >
-          Take Snapshot
-        </button>
-        <button
-          className="bg-black bg-opacity-20"
-          type="button"
-          onClick={() => getLedStripColors()}
-        >
-          Get Colors
-        </button>
-        <button
-          className={clsx('bg-black', 'bg-opacity-20', {
-            'bg-gradient-to-r from-purple-500 to-blue-500': currentMode === 'Flowing',
-          })}
-          type="button"
-          onClick={() => switchCurrentMode('Flowing')}
-        >
+      <div tw="flex gap-5 justify-center ">
+        <ButtonSwitch onClick={() => takeSnapshot()}>Take Snapshot</ButtonSwitch>
+        <ButtonSwitch onClick={() => getLedStripColors()}>Get Colors</ButtonSwitch>
+        <ButtonSwitch onClick={() => switchCurrentMode('Flowing')}>
           Flowing Light
-        </button>
-        <button
-          className={clsx('bg-black', 'bg-opacity-20', {
-            'bg-gradient-to-r from-purple-500 to-blue-500': currentMode === 'Follow',
-          })}
-          type="button"
-          onClick={() => switchCurrentMode('Follow')}
-        >
-          Follow
-        </button>
+        </ButtonSwitch>
+        <ButtonSwitch onClick={() => switchCurrentMode('Follow')}>Follow</ButtonSwitch>
       </div>
 
-      <div className="flex gap-5 justify-center">
+      <div tw="flex gap-5 justify-center">
         <Configurator />
       </div>
     </div>