Caricamento in corso...
; + if (error) returnErrore: {error}
; + + return ( +
+
+ );
+};
+
+export default FetchData;
diff --git a/app/src/components/Background.tsx b/app/src/components/Background.tsx
new file mode 100644
index 0000000..e7f8aaf
--- /dev/null
+++ b/app/src/components/Background.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+
+type BackgroundProps = {
+ imageUrl: string;
+ color: string;
+};
+
+const Background: React.FCRisultato dalla POST
+{JSON.stringify(data, null, 2)}
+
+ {name}
+
+ );
+};
+
+export default ExploreContainer;
diff --git a/app/src/components/NowPlayingDisc.css b/app/src/components/NowPlayingDisc.css
new file mode 100644
index 0000000..d02a9a6
--- /dev/null
+++ b/app/src/components/NowPlayingDisc.css
@@ -0,0 +1,54 @@
+/* @keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(360deg);
+ }
+} */
+
+.now-playing-disc {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 16px;
+}
+
+.cover-circle {
+ animation: spin 8s linear infinite;
+ width: 220px;
+ height: 220px;
+ border-radius: 50%;
+ background-size: cover;
+ background-position: center;
+ box-shadow: var(--box-shadow, 0 4px 10px rgba(0, 0, 0, 0.3));
+ margin-bottom: 16px;
+ outline: 4px solid rgba(218, 218, 218, 0.05);
+}
+
+.song-info {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+}
+
+.song-now-playing {
+ text-transform: uppercase;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--text-muted);
+ margin-bottom: 3px;
+}
+
+.song-title {
+ font-size: var(--title-font-size, 1.25rem);
+ font-weight: bold;
+ color: var(--text);
+}
+
+.song-artist {
+ font-size: var(--artist-font-size, 1rem);
+ font-weight: 800;
+ color: var(--text-shy);
+}
\ No newline at end of file
diff --git a/app/src/components/NowPlayingDisc.tsx b/app/src/components/NowPlayingDisc.tsx
new file mode 100644
index 0000000..58429c2
--- /dev/null
+++ b/app/src/components/NowPlayingDisc.tsx
@@ -0,0 +1,28 @@
+import "./NowPlayingDisc.css";
+
+import { IonText } from "@ionic/react";
+import React from "react";
+
+import { NowPlayingData } from "../mocks";
+
+const NowPlayingDisc: React.FCExplore UI Components
+
+
+
+ );
+};
+
+export default NowPlayingDisc;
diff --git a/app/src/components/NowPlayingTab.css b/app/src/components/NowPlayingTab.css
new file mode 100644
index 0000000..957b8b1
--- /dev/null
+++ b/app/src/components/NowPlayingTab.css
@@ -0,0 +1,69 @@
+.now-playing-cover {
+ margin-top: 25px;
+ margin-left: 25px;
+ width: calc(100% - 50px);
+ height: auto;
+ object-fit: cover;
+ display: block;
+ position: relative;
+ border-radius: 8px;
+}
+
+.now-playing-overlay {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 80px;
+ background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
+ pointer-events: none;
+}
+
+.now-playing-info {
+ padding: 0;
+ text-align: center;
+ color: white;
+}
+
+.now-playing-title {
+ font-size: 1.3rem;
+ font-weight: bold;
+ color: var(--text);
+ margin-bottom: 4px;
+}
+
+.now-playing-artist {
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: var(--text-shy);
+ margin-top: 0;
+ opacity: 0.8;
+}
+
+.now-playing-timeline-wrapper {
+ padding: 0 25px;
+}
+
+.now-playing-timeline-bg {
+ height: 6px;
+ width: 100%;
+ background-color: rgba(255, 255, 255, 0.3);
+ border-radius: 3px;
+ position: relative;
+}
+
+.now-playing-timeline-progress {
+ height: 100%;
+ background-color: white;
+ transition: width 1s linear;
+ border-radius: 3px;
+}
+
+.now-playing-time-labels {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.9rem;
+ color: white;
+ opacity: 0.7;
+ margin-top: 4px;
+}
\ No newline at end of file
diff --git a/app/src/components/NowPlayingTab.tsx b/app/src/components/NowPlayingTab.tsx
new file mode 100644
index 0000000..3195cee
--- /dev/null
+++ b/app/src/components/NowPlayingTab.tsx
@@ -0,0 +1,74 @@
+import { IonContent } from "@ionic/react";
+import React, { useEffect, useState } from "react";
+import "./NowPlayingTab.css";
+
+export interface NowPlayingData {
+ coverUrl: string;
+ title: string;
+ artist: string;
+ color: string;
+}
+
+interface NowPlayingTabProps {
+ data: NowPlayingData;
+ startTime: number; // timestamp in ms
+ duration: number; // duration in ms
+}
+
+const formatTime = (ms: number) => {
+ const totalSeconds = Math.floor(ms / 1000);
+ const minutes = Math.floor(totalSeconds / 60);
+ const seconds = totalSeconds % 60;
+ return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+};
+
+const NowPlayingTab: React.FC
+ {/* Now Playing */}
+ {title}
+ {artist}
+
+
+ 
+
+
+
+
+ {data.title}
+{data.artist}
+
+
+
+ );
+};
+
+export default NowPlayingTab;
diff --git a/app/src/components/Queue.css b/app/src/components/Queue.css
new file mode 100644
index 0000000..23a327a
--- /dev/null
+++ b/app/src/components/Queue.css
@@ -0,0 +1,77 @@
+.queue-container {
+ width: calc(100% - 40px);
+ margin: 20px;
+ border-radius: 16px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ margin-bottom: 200px;
+}
+
+/* Header con titolo e icona */
+.queue-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+h1.queue {
+ font-size: var(--title-font-size, 1.25rem);
+ font-weight: bold;
+ color: var(--text);
+ margin: 0;
+}
+
+/* Pulsante dell'icona di ricerca */
+.icon-button {
+ background: none;
+ color: var(--text);
+ font-size: 1.4rem;
+ margin-left: auto;
+ /* padding: 4px; */
+}
+
+/* Elementi della coda */
+.song-item {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 0;
+ border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+.cover {
+ width: 48px;
+ height: 48px;
+ border-radius: 8px;
+ object-fit: cover;
+ flex-shrink: 0;
+}
+
+.text-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.title {
+ font-weight: 700;
+ font-size: 1.1rem;
+ color: var(--text);
+}
+
+.artist {
+ font-size: 0.9rem;
+ font-weight: 800;
+ color: var(--text-muted);
+}
+
+/* Ionic modal override (optional styling) */
+ion-modal {
+ --border-radius: 16px;
+}
+
+/* Optional: fix spacing inside modal */
+ion-content {
+ padding: 16px;
+}
diff --git a/app/src/components/Queue.tsx b/app/src/components/Queue.tsx
new file mode 100644
index 0000000..248ff91
--- /dev/null
+++ b/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
+
+
+
+
+ {formatTime(elapsed)}
+ {formatTime(duration)}
+
+
+ setShowModal(false)}>
+
+
+ Add Songs
+ setShowModal(false)}
+ >
+ Close
+
+
+
+
+ setSearchText(e.detail.value!)}
+ placeholder="Search..."
+ />
+
+
+
+ );
+};
+
+export default Queue;
diff --git a/app/src/components/ThemeSelector.tsx b/app/src/components/ThemeSelector.tsx
new file mode 100644
index 0000000..c6cfd24
--- /dev/null
+++ b/app/src/components/ThemeSelector.tsx
@@ -0,0 +1,19 @@
+import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
+import { useTheme } from '../hooks/useTheme';
+
+export function ThemeSelector() {
+ const { theme, setTheme, themes } = useTheme();
+
+ return (
+
+ setShowModal(true)}
+ className="icon-button"
+ >
+
+
+
+ {songs.map((song, index) => (
+ Up next
+
+ 
+
+ ))}
+
+
+
+ {song.title}
+ {song.artist}
+
+ {current && (
+
+