work on team enrollment

src/features/teams/components/team-form/song-picker.tsx

@@ -0,0 +1,56 @@
+import { SlidePanelField } from "@/components/sheet/slide-panel";
+import { Stack, Text } from "@mantine/core";
+import { UseFormReturnType } from "@mantine/form";
+import { TeamInput } from "../../types";
+import { useEffect, useState } from "react";
+
+interface Song {
+  song_id: string;
+  song_name: string;
+  song_artist: string;
+  song_album: string;
+  song_year?: number;
+  song_start?: number;
+  song_end?: number;
+  song_image_url: string;
+}
+
+interface SongPickerProps {
+  form: UseFormReturnType<TeamInput>
+}
+
+const SongPicker = ({ form }: SongPickerProps) => {
+  const [song, setSong] = useState<Song>();
+
+  useEffect(() => {
+    const values = form.getValues();
+
+    setSong({
+      song_id: values.song_id || "",
+      song_name: values.song_name || "",
+      song_artist: values.song_artist || "",
+      song_album: values.song_album || "",
+      song_year: values.song_year,
+      song_start: values.song_start,
+      song_end: values.song_end,
+      song_image_url: values.song_image_url || "",
+    })
+  }, []);
+
+  return (
+    <SlidePanelField
+      key={"song-picker"}
+      value={""}
+      onChange={console.log}
+      Component={() => (
+        <Stack>
+          <Text>Song picker</Text>
+        </Stack>
+      )}
+      title={"Select Song"}
+      label={"Song"}
+    />
+  );
+};
+
+export default SongPicker;