navigate(-1)} />;
+ }
+
+ return (
+
+ {/* Header */}
+
+
+ {/* Card Stack */}
+
+
+ {/* Voting Actions */}
+
+
+ );
+}
diff --git a/src/pages/ExploreSetPage/SetExploreCard.tsx b/src/pages/ExploreSetPage/SetExploreCard.tsx
new file mode 100644
index 0000000..6e2c95f
--- /dev/null
+++ b/src/pages/ExploreSetPage/SetExploreCard.tsx
@@ -0,0 +1,152 @@
+import { FestivalSet } from "@/hooks/queries/sets/useSets";
+import { Card } from "@/components/ui/card";
+import { motion, PanInfo } from "framer-motion";
+import { useState } from "react";
+import { SetCardHeader } from "./SetExploreCard/SetCardHeader";
+import { PrimaryArtistDisplay } from "./SetExploreCard/PrimaryArtistDisplay";
+import { SupportingArtists } from "./SetExploreCard/SupportingArtists";
+import { SetAudioPlayer } from "./SetExploreCard/SetAudioPlayer";
+
+interface SetExploreCardProps {
+ set: FestivalSet;
+ isFront?: boolean;
+ onSwipe?: (direction: "left" | "right") => void;
+ onTap?: () => void;
+ onDragUpdate?: (
+ direction: "left" | "right" | null,
+ intensity: number,
+ ) => void;
+}
+
+export function SetExploreCard({
+ set,
+ isFront,
+ onSwipe,
+ onTap,
+ onDragUpdate,
+}: SetExploreCardProps) {
+ const [imageLoaded, setImageLoaded] = useState(false);
+ const [isDragging, setIsDragging] = useState(false);
+
+ // Get primary artist (first artist) for main display
+ const primaryArtist = set.artists[0];
+ const supportingArtists = set.artists.slice(1);
+
+ return (
+
+
+ {/* Background Image */}
+
+ {primaryArtist?.image_url && (
+ <>
+
setImageLoaded(true)}
+ />
+
+
+ )}
+
+ {/* Content */}
+
+ {/* Header Info */}
+
+
+ {/* Main Content */}
+
+ {/* Set Name */}
+
+
{set.name}
+
+
+ {/* Primary Artist */}
+ {primaryArtist && (
+
e.stopPropagation()}
+ />
+ )}
+
+ {/* Supporting Artists */}
+
+
+
+
+
+
+
+ {/* Footer */}
+
+
+ Swipe or tap buttons to vote
+
+
+
+
+
+ {artist.image_url ? (
+
+ ) : (
+
+
+
+ )}
+
+
{artist.name}
+ {artist.description && (
+
+ {artist.description}
+
+ )}
+
+
+
+
+
+ {/* SoundCloud iframe player */}
+
+
+ );
+}
diff --git a/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx b/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx
new file mode 100644
index 0000000..75c2d10
--- /dev/null
+++ b/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx
@@ -0,0 +1,60 @@
+import { Badge } from "@/components/ui/badge";
+import { Clock } from "lucide-react";
+import { StageBadge } from "@/components/StageBadge";
+import { useStageQuery } from "@/hooks/queries/stages/useStageQuery";
+
+interface SetCardHeaderProps {
+ stageId?: string;
+ timeStart: string | null;
+}
+
+export function SetCardHeader({ stageId, timeStart }: SetCardHeaderProps) {
+ const stageQuery = useStageQuery(stageId);
+
+ function formatTime(dateString: string | null) {
+ if (!dateString) return "";
+ const date = new Date(dateString);
+ return date.toLocaleTimeString("en-US", {
+ hour: "2-digit",
+ minute: "2-digit",
+ hour12: false,
+ });
+ }
+
+ function formatDate(dateString: string | null) {
+ if (!dateString) return "";
+ const date = new Date(dateString);
+ return date.toLocaleDateString("en-US", {
+ weekday: "short",
+ month: "short",
+ day: "numeric",
+ });
+ }
+
+ return (
+
+
+
+ {formatDate(timeStart)}
+
+ {timeStart && (
+
+
+ {formatTime(timeStart)}
+
+ )}
+
+
+ {stageQuery.data && (
+
+ )}
+
+
+ {artists.length === 1 ? "With" : "With"}
+
+
+ {artists.slice(0, 3).map((artist) => (
+
+ {artist.name}
+
+ ))}
+ {artists.length > 3 && (
+
+ +{artists.length - 3} more
+
+ )}
+
+
+ {/* Won't Go */}
+
+
+
+
+ {/* Skip without voting */}
+
+
+
+
+ {/* Must Go */}
+
+
+
+
+ {/* Interested */}
+
+
+
+
+ );
+}
diff --git a/src/pages/ExploreSetPage/components/CardStackContainer.tsx b/src/pages/ExploreSetPage/components/CardStackContainer.tsx
new file mode 100644
index 0000000..91fa74a
--- /dev/null
+++ b/src/pages/ExploreSetPage/components/CardStackContainer.tsx
@@ -0,0 +1,66 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { SetExploreCard } from "../SetExploreCard";
+import { FestivalSet } from "@/hooks/queries/sets/useSets";
+
+interface CardStackContainerProps {
+ currentSet: FestivalSet | undefined;
+ nextSet: FestivalSet | undefined;
+ direction: "left" | "right" | null;
+ onSwipe: (direction: "left" | "right") => void;
+ onDragUpdate: (direction: "left" | "right" | null, intensity: number) => void;
+ isLastSet: boolean;
+}
+
+export function CardStackContainer({
+ currentSet,
+ nextSet,
+ direction,
+ onSwipe,
+ onDragUpdate,
+ isLastSet,
+}: CardStackContainerProps) {
+ return (
+
+
+
+ {currentSet && (
+
+
+
+ )}
+
+
+ {/* Preview next card */}
+ {!isLastSet && nextSet && (
+
+
+
+ )}
+
+
+
+
No Sets Available
+
+ There are no sets to explore for this festival edition.
+
+
+
+
+
+
+
+
+
+
{editionName}
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/admin/ArtistsManagement/components/BulkEditorHeader.tsx b/src/pages/admin/ArtistsManagement/components/BulkEditorHeader.tsx
index 524bb6b..46513b9 100644
--- a/src/pages/admin/ArtistsManagement/components/BulkEditorHeader.tsx
+++ b/src/pages/admin/ArtistsManagement/components/BulkEditorHeader.tsx
@@ -2,6 +2,7 @@ import { CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Grid3X3, Plus, Copy } from "lucide-react";
import { Link } from "react-router-dom";
+import { SoundCloudSyncButton } from "./SoundCloudSyncButton";
interface BulkEditorHeaderProps {
onAddArtist: () => void;
@@ -13,9 +14,11 @@ export function BulkEditorHeader({ onAddArtist }: BulkEditorHeaderProps) {
- Artists Management
+ Artists
+
+