refactor: improved UI (#22)

* refactor: refactored home

* refactor: improved tracks UI

* fix: fixed audio stop on route change

* fix: improved responsivness of the FE API

assets/stylesheets/style.css

@@ -0,0 +1,49 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ background-color: #3b82f6;
+}
+
+@keyframes shake {
+
+ 0%,
+ 100% {
+ transform: translateX(0);
+ }
+
+ 25%,
+ 75% {
+ transform: translateX(-10px);
+ }
+
+ 50% {
+ transform: translateX(10px);
+ }
+}
+
+.main-c::after {
+ content: "";
+ display: block;
+ position: absolute;
+ background-image: url(../concert.webp);
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-size: cover;
+ z-index: 0;
+ opacity: 0.03;
+ filter: blur(3px);
+ pointer-events: none;
+}
+
+.sr-only {
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px 1px 1px 1px);
+ clip: rect(1px, 1px, 1px, 1px);
+}

components/Events/Events.tsx

@@ -2,33 +2,27 @@ import React from "react";
 
 import { Event } from "types";
 
-import styles from "./Events.module.scss";
+import { Calendar } from "lucide-react";
 
 interface EventsProps {
  events: Event[];
 }
 
 const Events = ({ events }: EventsProps) => (
- <div className={styles.container}>
+ <div>
  {events.map(({ date, venueName, location, buyUrl }) => {
  const eventDate = new Date(date);
  return (
- <a
- key={buyUrl}
- className={styles.event}
- href={buyUrl}
- target="_blank"
- rel="noreferrer"
- >
- <div className={styles.date}>
- <p className={styles.dateMonth}>
- {eventDate.toLocaleDateString("en-gb", { month: "short" })}
- </p>
- <p className={styles.dateDay}>{eventDate.getDate()}</p>
- </div>
- <div className={styles.details}>
- <p>{venueName}</p>
- <p className={styles.venue}>{location}</p>
+ <a key={buyUrl} href={buyUrl} target="_blank" rel="noreferrer">
+ <div className="bg-black bg-opacity-30 rounded-lg p-4 mb-6">
+ <h2 className="text-xl font-semibold mb-2">Next Gig</h2>
+ <div className="flex items-center">
+ <Calendar className="mr-2" size={18} />
+ <p>
+ {eventDate.toLocaleDateString("en-gb", { month: "short" })}{" "}
+ {eventDate.getDate()} - {venueName}, {location}
+ </p>
+ </div>
  </div>
  </a>
  );

components/Footer/Footer.tsx

@@ -1,27 +1,48 @@
+import classNames from "classnames";
 import React from "react";
 
 interface FooterProps {
+ className?: string;
  showCredits?: boolean;
 }
 
-import styles from "./Footer.module.scss";
-
-const Footer = ({ showCredits }: FooterProps) => (
- <footer className={styles.footer}>
+const Footer = ({ className, showCredits }: FooterProps) => (
+ <footer
+ className={classNames(
+ "text-sm text-muted-foreground pb-3 pt-10 text-center whitespace-nowrap",
+ className,
+ )}
+ >
  <p>
- <span>
- Created with &#9829; by{" "}
- <a href="https://sirlisko.com">Luca Lischetti (@sirLisko)</a>.
+ <span className="block sm:inline">
+ Created with ❤ by{" "}
+ <a
+ className="underline"
+ href="https://sirlisko.com"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ sirlisko
+ </a>
+ .
  </span>
  {showCredits && (
  <span>
  {" "}
  Thanks to <a href="https://setlist.fm">setlist.fm</a> API.
  </span>
  )}{" "}
- <span>
+ <span className="block sm:inline">
  View project source on{" "}
- <a href="https://github.com/sirLisko/GigPlayList">Github</a>.
+ <a
+ className="underline"
+ href="https://github.com/sirLisko/GigPlayList"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ github
+ </a>
+ .
  </span>
  </p>
  </footer>

components/Home/HowItWorks.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Search, WandSparkles, ListMusic } from "lucide-react";
+
+const HowItWorks = () => (
+ <div className="bg-white bg-opacity-10 backdrop-blur-md rounded-lg p-6 w-full max-w-2xl">
+ <h2 className="text-2xl font-semibold mb-6">How it works</h2>
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+ <div className="flex flex-col items-center text-center">
+ <Search size={32} className="mb-2" />
+ <p>The search scans the last 20 gigs of the artist</p>
+ </div>
+ <div className="flex flex-col items-center text-center">
+ <WandSparkles size={32} className="mb-2" />
+ <p>Creates a setlist based on likelihood of being played</p>
+ </div>
+ <div className="flex flex-col items-center text-center">
+ <ListMusic size={32} className="mb-2" />
+ <p>Save the list as a playlist! Directly in your Spotify</p>
+ </div>
+ </div>
+ </div>
+);
+
+export default HowItWorks;

components/Search/Search.tsx → components/Home/Search.tsx

@@ -1,8 +1,6 @@
 import React, { useRef, FormEvent } from "react";
 import { useRouter } from "next/router";
-import { MdSearch } from "react-icons/md";
-
-import styles from "./Search.module.scss";
+import { Search as SearchIcon } from "lucide-react";
 
 const Search = () => {
  const search = useRef<HTMLInputElement>(null);
@@ -13,11 +11,8 @@ const Search = () => {
  router.push("/[artist]", `/${search.current.value}`);
  };
  return (
- <>
- <form className={styles.container} onSubmit={onFormSubmit}>
- <label htmlFor="search" className="sr-only">
- Search for an artist:
- </label>
+ <form className="w-full max-w-md mb-12" onSubmit={onFormSubmit}>
+ <div className="relative">
  <input
  id="search"
  type="search"
@@ -26,12 +21,16 @@ const Search = () => {
  spellCheck="false"
  autoFocus={true}
  ref={search}
+ className="w-full py-3 px-4 pr-12 rounded-full bg-white bg-opacity-20 backdrop-blur-md text-white placeholder-white placeholder-opacity-75 focus:outline-none focus:ring-2 focus:ring-white"
  />
- <button className={styles.submit} type="submit">
- <MdSearch />
+ <button
+ className="absolute right-4 top-1/2 transform -translate-y-1/2 text-white"
+ type="submit"
+ >
+ <SearchIcon />
  </button>
- </form>
- </>
+ </div>
+ </form>
  );
 };