geoaccess app

app/src/components/Queue.tsx

@@ -1,13 +1,25 @@
-import './Queue.css';
+import "./Queue.css";
 
-import { IonButton, IonContent, IonHeader, IonIcon, IonModal, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react';
-import { add } from 'ionicons/icons';
-import React, { useState } from 'react';
+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 {
@@ -18,32 +30,64 @@ 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>
-        <IonButton
-          fill="clear"
-          onClick={() => setShowModal(true)}
-          className="icon-button"
-        >
-          <IonIcon icon={add} />
-        </IonButton>
+        <Plus
+          size={24}
+          color="white"
+          strokeWidth={2}
+          onClick={() => {
+            setShowModal(true);
+          }}
+        />
       </div>
 
-      {songs.map((song, index) => (
-        <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>
+      {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>
-        </div>
-      ))}
+        );
+      })}
 
       <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
         <IonHeader>