request-bot/src/components/blacklist-panel.tsx at 53d9dfec607c822e618622c4201499bc1a23cb8f · Jamesllllllllll/request-bot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import { ChevronDown } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";

export type BlacklistedArtistItem = {
  artistId: number;
  artistName: string;
};

export type BlacklistedSongItem = {
  songId: number;
  songTitle: string;
  artistName?: string | null;
};

export type BlacklistedCharterItem = {
  charterId: number;
  charterName: string;
};

export function BlacklistPanel(props: {
  title?: string;
  description?: string;
  artists: BlacklistedArtistItem[];
  charters?: BlacklistedCharterItem[];
  songs: BlacklistedSongItem[];
  collapsible?: boolean;
  defaultOpen?: boolean;
}) {
  const content = (
    <CardContent className="grid items-start gap-6 lg:grid-cols-3">
      <div className="grid content-start gap-3 self-start">
        {props.artists.length > 0 ? (
          <div className="overflow-hidden rounded-[20px] border border-(--border)">
            {props.artists.map((artist, index) => (
              <div
                key={artist.artistId}
                className={`px-4 py-2.5 text-sm ${
                  index % 2 === 0 ? "bg-(--panel-soft)" : "bg-(--panel-muted)"
                }`}
              >
                <p className="truncate text-(--text)">
                  {artist.artistName} ({artist.artistId})
                </p>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-sm text-(--muted)">No blacklisted artists.</p>
        )}
      </div>

      <div className="grid content-start gap-3 self-start">
        {(props.charters ?? []).length > 0 ? (
          <div className="overflow-hidden rounded-[20px] border border-(--border)">
            {(props.charters ?? []).map((charter, index) => (
              <div
                key={charter.charterId}
                className={`px-4 py-2.5 text-sm ${
                  index % 2 === 0 ? "bg-(--panel-soft)" : "bg-(--panel-muted)"
                }`}
              >
                <p className="truncate text-(--text)">
                  {charter.charterName} ({charter.charterId})
                </p>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-sm text-(--muted)">No blacklisted charters.</p>
        )}
      </div>

      <div className="grid content-start gap-3 self-start">
        {props.songs.length > 0 ? (
          <div className="overflow-hidden rounded-[20px] border border-(--border)">
            {props.songs.map((song, index) => (
              <div
                key={song.songId}
                className={`px-4 py-2.5 text-sm ${
                  index % 2 === 0 ? "bg-(--panel-soft)" : "bg-(--panel-muted)"
                }`}
              >
                <p className="truncate text-(--text)">
                  {song.songTitle} ({song.songId})
                </p>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-sm text-(--muted)">No blacklisted songs.</p>
        )}
      </div>
    </CardContent>
  );

  if (props.collapsible) {
    return (
      <Card>
        <details
          {...(props.defaultOpen ? { open: true } : {})}
          className="group"
        >
          <summary className="cursor-pointer list-none rounded-[28px] p-6 [&::-webkit-details-marker]:hidden">
            <div className="flex items-start justify-between gap-4">
              <div className="min-w-0">
                <CardTitle>
                  {props.title ?? "Blacklisted songs and artists"}
                </CardTitle>
                {props.description ? (
                  <p className="mt-2 text-sm text-(--muted)">
                    {props.description}
                  </p>
                ) : null}
              </div>
              <ChevronDown className="mt-1 h-5 w-5 shrink-0 text-(--muted) transition-transform group-open:rotate-180" />
            </div>
          </summary>
          {content}
        </details>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>{props.title ?? "Blacklisted songs and artists"}</CardTitle>
        {props.description ? (
          <p className="text-sm text-(--muted)">{props.description}</p>
        ) : null}
      </CardHeader>
      {content}
    </Card>
  );
}