app first commit

app/src/components/Queue.tsx

@@ -0,0 +1,73 @@
+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';
+
+interface NowPlayingDiscProps {
+  coverUrl: string;
+  title: string;
+  artist: string;
+}
+
+interface QueueProps {
+  songs: NowPlayingDiscProps[];
+}
+
+const Queue: React.FC<QueueProps> = ({ songs }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [searchText, setSearchText] = useState("");
+
+  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>
+      </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>
+          </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;