From e77a8821e0ae019db7ea71abe2f1be6aebbe1d2f Mon Sep 17 00:00:00 2001 From: Dominic Zimmer Date: Sun, 28 Apr 2024 13:01:14 +0200 Subject: [PATCH] Initial commit --- public/index.html | 2 +- src/App.css | 126 +++++++++++++++++++++++++++++++++++----------- src/App.tsx | 104 +++++++++++++++++++++++++++++++------- 3 files changed, 186 insertions(+), 46 deletions(-) diff --git a/public/index.html b/public/index.html index aa069f2..ecb183a 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,7 @@ - + div { + transition: transform 400ms ease-in-out; + } + button.plus { + z-index: 1; + div { + transform: rotate(0deg); + } + } + button.cross { + z-index: 1; + transform: translate(-25vw, 0); + div { + transform: rotate(225deg); + } + } + button.done { + transform: translate(25vw, 0); + z-index: 0; + } + button.gone { + transform: translate(0, 0); + z-index: 0; + } + } +} +.add-song-menu { display: flex; flex-direction: column; align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); + gap: 5px; + input { + max-width: 100%; + } +} +.entry { + position: relative; + padding: 15px; + background-color: var(--color-primary); + outline: inherit; + border: none; + .edit { + position: absolute; + right: 12px; + top: 2px; + font-size: 8pt !important; + } + .delete { + position: absolute; + right: 1px; + top: -6px; + font-size: 15pt !important; } } diff --git a/src/App.tsx b/src/App.tsx index a53698a..77dcc4c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,94 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import logo from './logo.svg'; import './App.css'; -function App() { +type Entry =[string, string, string]; + +const songlib: Entry[] = [ + [ "https://tabs.ultimate-guitar.com/tab/sdp/ne-leiche-chords-1869475", "SDP", "Ne Leiche" ], + [ "https://tabs.ultimate-guitar.com/tab/gloria-gaynor/i-will-survive-chords-154172", "Gloria Gaynor", "I will survive" ], + [ "https://tabs.ultimate-guitar.com/tab/sting/englishman-in-new-york-chords-2220", "Sting", "Englishman in New York"], +]; + +const App: React.FC = () => { + const [store, setStore] = useState(null); + const [addNew, setAddNew] = useState(null); + + useEffect(() => { + if (store !== null) { + localStorage.setItem("jamsite", JSON.stringify(store)); + return; + } + const entry = localStorage.getItem("jamsite"); + if (!entry) { + setStore([]); + return; + } + const reStored = JSON.parse(entry); + setStore(reStored); + }, [store]) + + const sortedStore = [...songlib, ...(store??[]) ].sort((a, b) => a[2].localeCompare(b[2])) + return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
+
+
+
+ + +
+ { addNew !== null ? +
+ { + setAddNew((addNew) => { + if (addNew === null) return null; + addNew[0] = e.target.value + return [...addNew]; + }); + }} placeholder="URL"> + { + setAddNew((addNew) => { + if (addNew === null) return null; + addNew[1] = e.target.value + return [...addNew]; + }); + }} placeholder="Artist"> + { + setAddNew((addNew) => { + if (addNew === null) return null; + addNew[2] = e.target.value + return [...addNew]; + }); + }} placeholder="Title"> +
+ :null } +
+
+ {sortedStore.map(([url, artist, title], index) => + + )} +
); }