working team update/create (still need enroll)

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

@@ -0,0 +1,67 @@
+import { Group, Avatar, Text, Box } from "@mantine/core";
+import { MusicNoteIcon } from "@phosphor-icons/react";
+
+interface Song {
+  song_id: string;
+  song_name: string;
+  song_artist: string;
+  song_album: string;
+  song_start?: number;
+  song_end?: number;
+  song_image_url: string;
+}
+
+interface SongSummaryProps {
+  song: Song | undefined;
+}
+
+const SongSummary = ({ song }: SongSummaryProps) => {
+  // Format time helper
+  const formatTime = (seconds: number | undefined) => {
+    if (seconds === undefined) return null;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+  };
+
+  // If no song selected
+  if (!song?.song_name) {
+    return (
+      <Group gap="xs" c="dimmed">
+        <MusicNoteIcon size={16} />
+        <Text size="sm" c="dimmed">No song selected</Text>
+      </Group>
+    );
+  }
+
+  const hasTimeSegment = song.song_start !== undefined && song.song_end !== undefined;
+
+  return (
+    <Group gap="sm" wrap="nowrap">
+      {song.song_image_url && (
+        <Avatar
+          src={song.song_image_url}
+          size={32}
+          radius="sm"
+        />
+      )}
+      <Box style={{ flex: 1, minWidth: 0 }}>
+        <Text size="sm" fw={500} truncate>
+          {song.song_name}
+        </Text>
+        <Group gap="xs" wrap="nowrap">
+          <Text size="xs" c="dimmed" truncate style={{ flex: 1 }}>
+            {song.song_artist}
+          </Text>
+          {hasTimeSegment && (
+            <Text size="xs" c="dimmed" fw={700}>
+              {formatTime(song.song_start)} - {formatTime(song.song_end)}
+            </Text>
+          )}
+        </Group>
+      </Box>
+    </Group>
+  );
+};
+
+export default SongSummary;