117 lines
2.8 KiB
TypeScript
117 lines
2.8 KiB
TypeScript
import "./Queue.css";
|
|
|
|
import {
|
|
IonButton,
|
|
IonContent,
|
|
IonHeader,
|
|
IonModal,
|
|
IonSearchbar,
|
|
IonTitle,
|
|
IonToolbar,
|
|
} from "@ionic/react";
|
|
|
|
import React, { useState } from "react";
|
|
|
|
import { ArrowBigUp, Plus } from "lucide-react";
|
|
|
|
interface NowPlayingDiscProps {
|
|
coverUrl: string;
|
|
title: string;
|
|
artist: string;
|
|
upvoted?: boolean;
|
|
upvotes?: number;
|
|
}
|
|
|
|
interface QueueProps {
|
|
songs: NowPlayingDiscProps[];
|
|
}
|
|
|
|
const Queue: React.FC<QueueProps> = ({ songs }) => {
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [searchText, setSearchText] = useState("");
|
|
|
|
const handleUpVote = () => {};
|
|
|
|
return (
|
|
<div className="queue-container">
|
|
<div className="queue-header">
|
|
<h1 className="queue">Up next</h1>
|
|
<Plus
|
|
size={24}
|
|
color="white"
|
|
strokeWidth={2}
|
|
onClick={() => {
|
|
setShowModal(true);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{songs.map((song, index) => {
|
|
const isUpvoted = song.upvoted ?? false;
|
|
const votes = song.upvotes ?? 0;
|
|
|
|
return (
|
|
<div className="song-item" key={index}>
|
|
<img
|
|
className="cover"
|
|
src={song.coverUrl}
|
|
alt={`${song.title} cover`}
|
|
/>
|
|
<div className="text-info">
|
|
<div className="title">{song.title}</div>
|
|
<div className="artist">{song.artist}</div>
|
|
</div>
|
|
|
|
<div
|
|
className="upvote-container"
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "6px",
|
|
marginLeft: "auto",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={handleUpVote}
|
|
>
|
|
<span
|
|
style={{ fontWeight: "600", color: "#444", userSelect: "none" }}
|
|
>
|
|
{votes}
|
|
</span>
|
|
<ArrowBigUp
|
|
size={24}
|
|
strokeWidth={2.5}
|
|
color={isUpvoted ? "#ff6600" : "#999"}
|
|
fill={isUpvoted ? "#ff6600" : "none"}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
<IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
|
|
<IonHeader>
|
|
<IonToolbar>
|
|
<IonTitle>Add Songs</IonTitle>
|
|
<IonButton
|
|
slot="end"
|
|
fill="clear"
|
|
onClick={() => setShowModal(false)}
|
|
>
|
|
Close
|
|
</IonButton>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
<IonContent>
|
|
<IonSearchbar
|
|
value={searchText}
|
|
onIonInput={(e) => setSearchText(e.detail.value!)}
|
|
placeholder="Search..."
|
|
/>
|
|
</IonContent>
|
|
</IonModal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Queue;
|