hilk.eu
this repo has no description
1"use client";
2
3import { useState } from "react";
4import { ArtistForm } from "@/components/ArtistForm";
5import { PublishingOwnerForm } from "@/components/PublishingOwnerForm";
6import { MasterOwnerForm } from "@/components/MasterOwnerForm";
7import { SongForm } from "@/components/SongForm";
8import SongList from "@/components/SongList";
9import { RecordingForm } from "@/components/RecordingForm";
10import { RecordingList } from "@/components/RecordingList";
11import { ReleaseForm } from "@/components/ReleaseForm";
12import { ReleaseList } from "@/components/ReleaseList";
13
14interface Song {
15 id: string;
16 title: string;
17 iswc?: string;
18 interestedParties: any[];
19}
20
21interface Recording {
22 id: string;
23 title: string;
24 song?: any;
25 artists: any[];
26 isrc?: string;
27 masterOwner?: any;
28 duration?: number;
29}
30
31interface Release {
32 id: string;
33 title: string;
34 artists: any[];
35 gtin?: string;
36 releaseDate?: string;
37 recordings?: any[];
38}
39
40export function ProfileTabs() {
41 const [activeTab, setActiveTab] = useState<"artist" | "owner" | "master" | "song" | "recording" | "release">("artist");
42 const [showSongForm, setShowSongForm] = useState(false);
43 const [editingSong, setEditingSong] = useState<Song | null>(null);
44 const [songListRefresh, setSongListRefresh] = useState(0);
45 const [showRecordingForm, setShowRecordingForm] = useState(false);
46 const [editingRecording, setEditingRecording] = useState<Recording | null>(null);
47 const [recordingListRefresh, setRecordingListRefresh] = useState(0);
48 const [showReleaseForm, setShowReleaseForm] = useState(false);
49 const [editingRelease, setEditingRelease] = useState<Release | null>(null);
50 const [releaseListRefresh, setReleaseListRefresh] = useState(0);
51
52 return (
53 <div className="space-y-4">
54 <div className="flex gap-2 border-b border-zinc-200 dark:border-zinc-800 overflow-x-auto">
55 <button
56 onClick={() => setActiveTab("artist")}
57 className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
58 activeTab === "artist"
59 ? "border-blue-600 text-blue-600 dark:text-blue-400"
60 : "border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200"
61 }`}
62 >
63 Artist
64 </button>
65 <button
66 onClick={() => setActiveTab("owner")}
67 className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
68 activeTab === "owner"
69 ? "border-blue-600 text-blue-600 dark:text-blue-400"
70 : "border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200"
71 }`}
72 >
73 Publishing Owner
74 </button>
75 <button
76 onClick={() => setActiveTab("master")}
77 className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
78 activeTab === "master"
79 ? "border-blue-600 text-blue-600 dark:text-blue-400"
80 : "border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200"
81 }`}
82 >
83 Master Owner
84 </button>
85 <button
86 onClick={() => setActiveTab("song")}
87 className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
88 activeTab === "song"
89 ? "border-blue-600 text-blue-600 dark:text-blue-400"
90 : "border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200"
91 }`}
92 >
93 Songs
94 </button>
95 <button
96 onClick={() => setActiveTab("recording")}
97 className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
98 activeTab === "recording"
99 ? "border-blue-600 text-blue-600 dark:text-blue-400"
100 : "border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200"
101 }`}
102 >
103 Recordings
104 </button>
105 <button
106 onClick={() => setActiveTab("release")}
107 className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
108 activeTab === "release"
109 ? "border-blue-600 text-blue-600 dark:text-blue-400"
110 : "border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200"
111 }`}
112 >
113 Releases
114 </button>
115 </div>
116
117 <div>
118 {activeTab === "artist" && <ArtistForm />}
119 {activeTab === "owner" && <PublishingOwnerForm />}
120 {activeTab === "master" && <MasterOwnerForm />}
121 {activeTab === "song" && (
122 <>
123 <SongList
124 onNewSong={() => {
125 setEditingSong(null);
126 setShowSongForm(true);
127 }}
128 onEditSong={(song) => {
129 setEditingSong(song);
130 setShowSongForm(true);
131 }}
132 refreshTrigger={songListRefresh}
133 />
134 {showSongForm && (
135 <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50 p-4">
136 <div className="bg-white dark:bg-zinc-900 p-6 rounded-lg shadow-lg max-w-lg w-full max-h-[90vh] overflow-y-auto relative">
137 <button
138 className="absolute top-2 right-2 text-zinc-500 hover:text-zinc-900"
139 onClick={() => {
140 setShowSongForm(false);
141 setEditingSong(null);
142 }}
143 >
144 ✕
145 </button>
146 <SongForm
147 editingSong={editingSong || undefined}
148 onSongSaved={() => {
149 setSongListRefresh(prev => prev + 1);
150 setShowSongForm(false);
151 setEditingSong(null);
152 }}
153 />
154 </div>
155 </div>
156 )}
157 </>
158 )}
159 {activeTab === "recording" && (
160 <>
161 <div className="mb-4">
162 <button
163 onClick={() => {
164 setEditingRecording(null);
165 setShowRecordingForm(true);
166 }}
167 className="inline-flex py-2 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
168 >
169 + New Recording
170 </button>
171 </div>
172 <RecordingList
173 onEditRecording={(recording) => {
174 setEditingRecording(recording);
175 setShowRecordingForm(true);
176 }}
177 refreshTrigger={recordingListRefresh}
178 />
179 {showRecordingForm && (
180 <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50 p-4">
181 <div className="bg-white dark:bg-zinc-900 p-6 rounded-lg shadow-lg max-w-lg w-full max-h-[90vh] overflow-y-auto relative">
182 <button
183 className="absolute top-2 right-2 text-zinc-500 hover:text-zinc-900"
184 onClick={() => {
185 setShowRecordingForm(false);
186 setEditingRecording(null);
187 }}
188 >
189 ✕
190 </button>
191 <RecordingForm
192 editingRecording={editingRecording || undefined}
193 onRecordingSaved={() => {
194 setRecordingListRefresh(prev => prev + 1);
195 setShowRecordingForm(false);
196 setEditingRecording(null);
197 }}
198 />
199 </div>
200 </div>
201 )}
202 </>
203 )}
204 {activeTab === "release" && (
205 <>
206 <div className="mb-4">
207 <button
208 onClick={() => {
209 setEditingRelease(null);
210 setShowReleaseForm(true);
211 }}
212 className="inline-flex py-2 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
213 >
214 + New Release
215 </button>
216 </div>
217 <ReleaseList
218 onEditRelease={(release) => {
219 setEditingRelease(release);
220 setShowReleaseForm(true);
221 }}
222 refreshTrigger={releaseListRefresh}
223 />
224 {showReleaseForm && (
225 <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50 p-4">
226 <div className="bg-white dark:bg-zinc-900 p-6 rounded-lg shadow-lg max-w-lg w-full max-h-[90vh] overflow-y-auto relative">
227 <button
228 className="absolute top-2 right-2 text-zinc-500 hover:text-zinc-900"
229 onClick={() => {
230 setShowReleaseForm(false);
231 setEditingRelease(null);
232 }}
233 >
234 ✕
235 </button>
236 <ReleaseForm
237 editingRelease={editingRelease || undefined}
238 onReleaseSaved={() => {
239 setReleaseListRefresh(prev => prev + 1);
240 setShowReleaseForm(false);
241 setEditingRelease(null);
242 }}
243 />
244 </div>
245 </div>
246 )}
247 </>
248 )}
249 </div>
250 </div>
251 );
252}