重构逐句视频播放器

src/components/ui/buttons/DarkButton.tsx

@@ -6,18 +6,21 @@ export default function DarkButton({
   selected,
   children,
   type = "button",
+  disabled
 }: {
-  onClick?: () => void;
+  onClick?: (() => void) | undefined;
   className?: string;
   selected?: boolean;
   children?: React.ReactNode;
   type?: ButtonType;
+  disabled?: boolean;
 }) {
   return (
     <PlainButton
       onClick={onClick}
-      className={`hover:bg-gray-600 text-white ${selected ? "bg-gray-600" : "bg-gray-800"} ${className}`}
+      className={`hover:bg-gray-100 text-black ${selected ? "bg-gray-100" : "bg-white"} ${className}`}
       type={type}
+      disabled={disabled}
     >
       {children}
     </PlainButton>

src/components/ui/buttons/LightButton.tsx

@@ -6,18 +6,21 @@ export default function LightButton({
   selected,
   children,
   type = "button",
+  disabled
 }: {
-  onClick?: () => void;
+  onClick?: (() => void) | undefined;
   className?: string;
   selected?: boolean;
   children?: React.ReactNode;
   type?: ButtonType;
+  disabled?: boolean;
 }) {
   return (
     <PlainButton
       onClick={onClick}
-      className={`hover:bg-gray-200 text-gray-800 ${selected ? "bg-gray-200" : "bg-white"} ${className}`}
+      className={`hover:bg-gray-100 text-black ${selected ? "bg-gray-100" : "bg-white"} ${className}`}
       type={type}
+      disabled={disabled}
     >
       {children}
     </PlainButton>

src/components/ui/buttons/PlainButton.tsx

@@ -1,21 +1,24 @@
-export type ButtonType =  "button" | "submit" | "reset" | undefined;
+export type ButtonType = "button" | "submit" | "reset" | undefined;
 
 export default function PlainButton({
   onClick,
   className,
   children,
   type = "button",
+  disabled
 }: {
   onClick?: () => void;
   className?: string;
   children?: React.ReactNode;
-    type?: ButtonType;
+  type?: ButtonType;
+  disabled?: boolean;
 }) {
   return (
     <button
       onClick={onClick}
       className={`px-2 py-1 rounded shadow font-bold hover:cursor-pointer ${className}`}
       type={type}
+      disabled={disabled}
     >
       {children}
     </button>