v5.7-beta2

2025-11-22 12:06:00 +07:00
parent 1c9bba0140
commit ee2976143a
13 changed files with 1759 additions and 1183 deletions
@@ -0,0 +1,74 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Search, Info, XCircle } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface SearchBarProps {
+  url: string;
+  loading: boolean;
+  onUrlChange: (url: string) => void;
+  onFetch: () => void;
+}
+
+export function SearchBar({ url, loading, onUrlChange, onFetch }: SearchBarProps) {
+  return (
+    <Card>
+      <CardContent className="px-6 py-6 space-y-4">
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Label htmlFor="spotify-url">Spotify URL</Label>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info className="h-4 w-4 text-muted-foreground cursor-help" />
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                <p>Supports track, album, playlist, and artist URLs</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          <div className="flex gap-2">
+            <div className="relative flex-1">
+              <Input
+                id="spotify-url"
+                placeholder="https://open.spotify.com/..."
+                value={url}
+                onChange={(e) => onUrlChange(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && onFetch()}
+                className="pr-8"
+              />
+              {url && (
+                <button
+                  type="button"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                  onClick={() => onUrlChange("")}
+                >
+                  <XCircle className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+            <Button onClick={onFetch} disabled={loading}>
+              {loading ? (
+                <>
+                  <Spinner />
+                  Fetching...
+                </>
+              ) : (
+                <>
+                  <Search className="h-4 w-4" />
+                  Fetch
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}