Design Prot Merge #1

Merged
NotS1mp merged 217 commits from design-prot into master 2026-09-21 15:48:16 +00:00
4 changed files with 7 additions and 61 deletions
Showing only changes of commit b372028e0a - Show all commits
+3 -7
View File
@@ -6,8 +6,6 @@
import Library from '@lucide/svelte/icons/library-big';
import ListMusic from '@lucide/svelte/icons/list-music';
import Upload from '@lucide/svelte/icons/upload';
import Infinity_ from '@lucide/svelte/icons/infinity';
import ArrowDown from '@lucide/svelte/icons/arrow-down';
import LogOut from '@lucide/svelte/icons/log-out';
interface Props {
@@ -32,14 +30,12 @@
const mainLinks = [
{ href: '/', label: 'Inicio', icon: Home },
{ href: '/explore', label: 'Buscar', icon: Search },
{ href: '/library', label: 'Tu biblioteca', icon: Library },
{ href: '/playlists', label: 'Tus listas', icon: ListMusic }
{ href: '/playlists', label: 'Mis listas', icon: ListMusic }
];
const secondaryLinks = [
{ href: '/upload', label: 'Subir música', icon: Upload },
{ href: '/import', label: 'Importar', icon: Infinity_ },
{ href: '/downloads', label: 'Descargas', icon: ArrowDown }
{ href: '/library', label: 'Tus canciones subidas', icon: Library },
{ href: '/upload', label: 'Subir música', icon: Upload }
];
function isActive(href: string) {
@@ -1,25 +0,0 @@
<script lang="ts">
import ArrowDown from '@lucide/svelte/icons/arrow-down';
</script>
<svelte:head>
<title>Descargas · Musify</title>
<meta name="description" content="Tus descargas en Musify." />
</svelte:head>
<section class="px-8 py-11">
<h1 class="font-display text-[28px] font-extrabold tracking-tight">Descargas</h1>
<p class="mb-7 mt-1.5 max-w-[560px] text-sm text-[var(--mf-text-2)]">
Escucha sin conexión lo que descargues.
</p>
<div
class="max-w-[560px] rounded-xl border border-[var(--mf-border)] bg-[var(--mf-surface)] px-6 py-10 text-center"
>
<ArrowDown class="mx-auto h-8 w-8 text-[var(--mf-text-3)]" strokeWidth={1.5} />
<p class="mt-4 text-sm text-[var(--mf-text-2)]">Todavía no tienes descargas</p>
<p class="mt-1.5 text-[12.5px] text-[var(--mf-text-4)]">
Las canciones que descargues aparecerán aquí.
</p>
</div>
</section>
@@ -1,25 +0,0 @@
<script lang="ts">
import Infinity_ from '@lucide/svelte/icons/infinity';
</script>
<svelte:head>
<title>Importar · Musify</title>
<meta name="description" content="Importa tu música desde otros servicios." />
</svelte:head>
<section class="px-8 py-11">
<h1 class="font-display text-[28px] font-extrabold tracking-tight">Importar</h1>
<p class="mb-7 mt-1.5 max-w-[560px] text-sm text-[var(--mf-text-2)]">
Trae tu música desde otros servicios.
</p>
<div
class="max-w-[560px] rounded-xl border border-[var(--mf-border)] bg-[var(--mf-surface)] px-6 py-10 text-center"
>
<Infinity_ class="mx-auto h-8 w-8 text-[var(--mf-text-3)]" strokeWidth={1.5} />
<p class="mt-4 text-sm text-[var(--mf-text-2)]">Próximamente</p>
<p class="mt-1.5 text-[12.5px] text-[var(--mf-text-4)]">
Podrás importar tu música desde otras plataformas.
</p>
</div>
</section>
@@ -26,17 +26,17 @@
</script>
<svelte:head>
<title>Tu biblioteca · Musify</title>
<meta name="description" content="Todas tus canciones en Musify." />
<title>Tus canciones subidas · Musify</title>
<meta name="description" content="Todas tus canciones subidas a Musify." />
</svelte:head>
<section class="px-8 py-11">
<div class="flex items-end justify-between gap-4">
<div>
<h1 class="font-display text-[28px] font-extrabold tracking-tight">Tu biblioteca</h1>
<h1 class="font-display text-[28px] font-extrabold tracking-tight">Tus canciones subidas</h1>
<p class="mt-1.5 text-sm text-[var(--mf-text-2)]">
{total}
{total === 1 ? 'canción' : 'canciones'} en tu biblioteca.
{total === 1 ? 'canción' : 'canciones'} subida{total === 1 ? '' : 's'}.
</p>
</div>
<a