存客宝 React

Cunkebao/app/workspace/moments-sync/[id]/edit/steps/device-selection.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search } from "lucide-react"
+
+interface DeviceSelectionProps {
+  selectedDevices: string[]
+  onChange: (devices: string[]) => void
+  onNext: () => void
+  onPrev: () => void
+}
+
+export function DeviceSelection({ selectedDevices, onChange, onNext, onPrev }: DeviceSelectionProps) {
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+        <Input placeholder="选择设备" className="pl-9" />
+      </div>
+
+      <div className="min-h-[300px] flex items-center justify-center text-gray-400">选择设备组件将在这里实现</div>
+
+      <div className="flex space-x-3 mt-8">
+        <Button variant="outline" onClick={onPrev} className="flex-1">
+          上一步
+        </Button>
+        <Button onClick={onNext} className="flex-1">
+          下一步
+        </Button>
+      </div>
+    </div>
+  )
+}
+