refactor: batch 2

src/components/InstructionsTabs.tsx

@@ -0,0 +1,33 @@
+import React, { Fragment, useId } from 'react';
+
+export type InstructionTab = {
+  id: string | number;
+  label: React.ReactNode;
+  content: React.ReactNode;
+};
+
+export interface InstructionsTabsProps {
+  tabs: InstructionTab[];
+}
+
+export function InstructionsTabs({ tabs }: InstructionsTabsProps) {
+  const id = useId();
+  return (
+    <div className="tabs tabs-lift h-[20rem] pb-4">
+      {tabs.map(({ id: _tabId, label, content }, index) => (
+        <Fragment key={_tabId}>
+          <label className="tab">
+            <input type="radio" name={id} defaultChecked={index === 0} />
+            {label}
+          </label>
+          <div className="tab-content border-base-300 bg-base-100 px-4 py-2 overflow-y-auto">{content}</div>
+        </Fragment>
+      ))}
+      {/*<label className="tab">*/}
+      {/*  <input type="radio" name={id} />a*/}
+      {/*</label>*/}
+      {/*<div className="tab-content border-base-300 bg-base-100 px-4 py-2 overflow-y-auto"></div>*/}
+      {/*<input type="radio" name={id} className="tab" aria-label="安卓" defaultChecked />*/}
+    </div>
+  );
+}