+
+
+
+
\ No newline at end of file
diff --git a/playbeat/src/components/Stats3.astro b/playbeat/src/components/Stats3.astro
new file mode 100644
index 0000000..5c9843b
--- /dev/null
+++ b/playbeat/src/components/Stats3.astro
@@ -0,0 +1,24 @@
+---
+interface Props{
+ name: string;
+ num: string;
+ idNum: string;
+}
+
+const {name, num, idNum} = Astro.props;
+---
+
+
+
+
{name}
+
+
{num} visualizaciones
+
{num} apariciones en listas
+
+
+
+
+
+
+
+
diff --git a/playbeat/src/components/Tabs.astro b/playbeat/src/components/Tabs.astro
index 08bead1..feddf74 100644
--- a/playbeat/src/components/Tabs.astro
+++ b/playbeat/src/components/Tabs.astro
@@ -1,5 +1,5 @@
---
-import Queue from './Queue.astro';
+import Queue from './Queue.vue';
import History from './History.astro';
const tabsItem = [
@@ -30,7 +30,7 @@ const {subject, class:className} = Astro.props;
{tabsItem.map((tab)=> {
return (
-
{tab.content == "Cola" ?
+
{tab.content == "Cola" ?
)
})}
@@ -40,6 +40,7 @@ const {subject, class:className} = Astro.props;
\ No newline at end of file
diff --git a/playbeat/src/components/TagsTabs.astro b/playbeat/src/components/TagsTabs.astro
new file mode 100644
index 0000000..bb677b3
--- /dev/null
+++ b/playbeat/src/components/TagsTabs.astro
@@ -0,0 +1,105 @@
+---
+import Tags from '@components/Tags.astro';
+
+const tabsItem = [
+ { id: 'Canción', label: 'Canción', content: "Canción" },
+ { id: 'Podcast', label: 'Podcast', content: "Podcast" },
+];
+
+const tagsCancion = ["Pop", "Rock", "Indie", "R&b", "Rap", "Latino", "Trap"]
+const tagsPodcast = ["Historia", "Ciencia", "Cultura", "Deporte", "Música", "Humor", "Tecnología", "Negocios"]
+
+interface Props{
+ subject: string;
+ class?: string;
+}
+
+const {subject, class:className} = Astro.props;
+
+---
+
+
+
+ {tabsItem.map((tab, index)=> {
+ return (
+
+
+
{tab.label}
+
+ )
+ })}
+ {tabsItem.map((tab)=> {
+ return (
+
+
{tab.content == "Canción" ? : }
+
+ )
+ })}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playbeat/src/constants.ts b/playbeat/src/constants.ts
new file mode 100644
index 0000000..e18e25d
--- /dev/null
+++ b/playbeat/src/constants.ts
@@ -0,0 +1,2 @@
+export const PUBLIC_ROUTES = ["/", "/login", "/register"];
+export const TOKEN = "token";
\ No newline at end of file
diff --git a/playbeat/src/globalState/globalUrl.js b/playbeat/src/globalState/globalUrl.js
new file mode 100644
index 0000000..4058f81
--- /dev/null
+++ b/playbeat/src/globalState/globalUrl.js
@@ -0,0 +1,3 @@
+export const Global ={
+ url: "http://playbeat.uksouth.cloudapp.azure.com:3000/"
+};
\ No newline at end of file
diff --git a/playbeat/src/hooks/numProgressives.ts b/playbeat/src/hooks/numProgressives.ts
new file mode 100644
index 0000000..a90abab
--- /dev/null
+++ b/playbeat/src/hooks/numProgressives.ts
@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useState } from 'react'
+
+export const numProgressives = (
+ initialValue: number | (() => number),
+ duration = 1500,
+ decimals = 0,
+ delay = 5
+): [string, (value: string | ((prevTarget: number) => number)) => void] => {
+ const [target, setTarget] = useState(initialValue)
+ const [current, setCurrent] = useState(initialValue)
+ const [steps, setSteps] = useState(1)
+ const [currentStep, setCurrentStep] = useState(1);
+
+ const initial = typeof initialValue === 'function' ? initialValue() : initialValue;
+
+ const setValue = useCallback(
+ (value: string | ((prevTarget: number) => number)) => {
+ const nextTarget = typeof value === 'function' ? value(target) : value
+ const steps = Math.max(Math.floor(duration / delay), 1)
+ setSteps(steps)
+ setTarget(Number(nextTarget))
+ setCurrentStep(1);
+ setCurrent(lerp(initial, Number(nextTarget), easeOutCubic(1 / steps)))
+ },
+ [delay, duration, target]
+ )
+
+ useEffect(() => {
+ const timeout = setTimeout(
+ () => {
+ const progress = currentStep / steps;
+ if (progress === 1) {
+ setCurrent(target);
+ } else {
+ setCurrent(lerp(initial, target, easeOutCubic(progress)))
+ setCurrentStep(currentStep + 1)
+ }
+ },
+ delay
+ )
+
+ return () => clearTimeout(timeout)
+ }, [delay, currentStep, target])
+ const value = current.toFixed(decimals)
+ return [value, setValue]
+}
+
+const lerp = (a: number, b: number, alpha: number): number => {
+ return a + (alpha * (b - a))
+}
+
+const easeOutCubic = (value: number): number => {
+ return 1 - Math.pow(1 - value, 3)
+}
\ No newline at end of file
diff --git a/playbeat/src/icons/Dashboard.astro b/playbeat/src/icons/Dashboard.astro
new file mode 100644
index 0000000..2ae095e
--- /dev/null
+++ b/playbeat/src/icons/Dashboard.astro
@@ -0,0 +1,7 @@
+
+
\ No newline at end of file
diff --git a/playbeat/src/icons/Graph.astro b/playbeat/src/icons/Graph.astro
new file mode 100644
index 0000000..267f308
--- /dev/null
+++ b/playbeat/src/icons/Graph.astro
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/playbeat/src/icons/World.astro b/playbeat/src/icons/World.astro
new file mode 100644
index 0000000..27057f1
--- /dev/null
+++ b/playbeat/src/icons/World.astro
@@ -0,0 +1,8 @@
+
+
\ No newline at end of file
diff --git a/playbeat/src/layouts/CreatorLayout.astro b/playbeat/src/layouts/CreatorLayout.astro
new file mode 100644
index 0000000..59bacc1
--- /dev/null
+++ b/playbeat/src/layouts/CreatorLayout.astro
@@ -0,0 +1,65 @@
+---
+import LeftBarCreator from '@components/LeftBarCreator.astro';
+import { ViewTransitions } from 'astro:transitions';
+
+interface Props {
+ title: string;
+}
+
+const { title } = Astro.props;
+---
+
+
+
+
+
+
+
+
+
+
+
{title}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/playbeat/src/layouts/Layout.astro b/playbeat/src/layouts/Layout.astro
index 5a2ca09..ee2aa61 100644
--- a/playbeat/src/layouts/Layout.astro
+++ b/playbeat/src/layouts/Layout.astro
@@ -5,7 +5,7 @@ import {Player} from '@/components/Player';
// import Library from '../components/LeftBar.astro';
// import Queue from '../components/RightBar.astro';
// import {Player} from '../components/Player';
-import { ViewTransitions } from 'astro:transitions';
+import { ViewTransitions, fade } from 'astro:transitions';
import List from '@/icons/List.astro'
interface Props {
@@ -48,27 +48,36 @@ const { title } = Astro.props;
-
-
+
+
\ No newline at end of file
diff --git a/playbeat/src/components/LeftBar.astro b/playbeat/src/components/LeftBar.astro
index b7eccdd..107ae8a 100644
--- a/playbeat/src/components/LeftBar.astro
+++ b/playbeat/src/components/LeftBar.astro
@@ -5,6 +5,7 @@ import Lupa from "@/icons/Lupa.astro"
import Mas from "@/icons/Mas.astro"
import Micro from "@/icons/Micro.astro"
import NotaList from "@/icons/NotaList.astro"
+import World from "@/icons/World.astro"
@@ -12,39 +13,51 @@ import NotaList from "@/icons/NotaList.astro"
const Playlists = [
{
name: "Playlist 1",
+ id:"plalist1"
},
{
name: "Playlist 2",
+ id:"plalist2"
},
{
name: "Playlist 3",
+ id:"plalist3"
},
{
name: "Playlist 4",
+ id:"plalist4"
},
{
name: "Playlist 5",
+ id:"plalist5"
},
{
name: "Playlist 6",
+ id:"plalist6"
},
{
name: "Playlist 7",
+ id:"plalist7"
},
{
name: "Playlist 8",
+ id:"plalist8"
},
{
name: "Playlist 9",
+ id:"plalist9"
},
{
name: "Playlist 10",
+ id:"plalist10"
},
{
name: "Playlist 11",
+ id:"plalist11"
},
{
name: "Playlist 12",
+ id:"plalist12"
}
]
@@ -80,21 +93,27 @@ const Playlists = [
Podcast
+ 
+ 
))}