feat: add generated genre list on dashboard

package.json

@@ -72,6 +72,7 @@
     ]
   },
   "devDependencies": {
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "uniqolor": "^1.1.0"
   }
 }

scripts/generate-genres.js

@@ -0,0 +1,133 @@
+const uniqolor = require("uniqolor");
+
+const genres = [
+  { name: "Acoustic" },
+  { name: "Afrobeat" },
+  { name: "Alt-rock" },
+  { name: "Alternative" },
+  { name: "Ambient" },
+  { name: "Anime" },
+  { name: "Black-metal" },
+  { name: "Bluegrass" },
+  { name: "Blues" },
+  { name: "Bossanova" },
+  { name: "Brazil" },
+  { name: "Breakbeat" },
+  { name: "British" },
+  { name: "Cantopop" },
+  { name: "Chicago-house" },
+  { name: "Children" },
+  { name: "Chill" },
+  { name: "Classical" },
+  { name: "Club" },
+  { name: "Comedy" },
+  { name: "Country" },
+  { name: "Dance" },
+  { name: "Dancehall" },
+  { name: "Death-metal" },
+  { name: "Deep-house" },
+  { name: "Detroit-techno" },
+  { name: "Disco" },
+  { name: "Disney" },
+  { name: "Drum-and-bass" },
+  { name: "Dub" },
+  { name: "Dubstep" },
+  { name: "Edm" },
+  { name: "Electro" },
+  { name: "Electronic" },
+  { name: "Emo" },
+  { name: "Folk" },
+  { name: "Forro" },
+  { name: "Funk" },
+  { name: "Garage" },
+  { name: "Gospel" },
+  { name: "Goth" },
+  { name: "Grindcore" },
+  { name: "Groove" },
+  { name: "Grunge" },
+  { name: "Guitar" },
+  { name: "Happy" },
+  { name: "Hard-rock" },
+  { name: "Hardcore" },
+  { name: "Hardstyle" },
+  { name: "Heavy-metal" },
+  { name: "Hip-hop" },
+  { name: "Holidays" },
+  { name: "Honky-tonk" },
+  { name: "House" },
+  { name: "Idm" },
+  { name: "Industrial" },
+  { name: "J-dance" },
+  { name: "J-idol" },
+  { name: "J-pop" },
+  { name: "J-rock" },
+  { name: "Jazz" },
+  { name: "K-pop" },
+  { name: "Kids" },
+  { name: "Latin" },
+  { name: "Latino" },
+  { name: "Malay" },
+  { name: "Mandopop" },
+  { name: "Metal" },
+  { name: "Metal-misc" },
+  { name: "Metalcore" },
+  { name: "Minimal-techno" },
+  { name: "Mpb" },
+  { name: "Opera" },
+  { name: "Pagode" },
+  { name: "Party" },
+  { name: "Piano" },
+  { name: "Pop" },
+  { name: "Post-dubstep" },
+  { name: "Power-pop" },
+  { name: "Progressive-house" },
+  { name: "Psych-rock" },
+  { name: "Punk" },
+  { name: "Punk-rock" },
+  { name: "R-n-b" },
+  { name: "Rainy-day" },
+  { name: "Reggae" },
+  { name: "Reggaeton" },
+  { name: "Road-trip" },
+  { name: "Rock" },
+  { name: "Rock-n-roll" },
+  { name: "Rockabilly" },
+  { name: "Romance" },
+  { name: "Sad" },
+  { name: "Salsa" },
+  { name: "Samba" },
+  { name: "Sertanejo" },
+  { name: "Show-tunes" },
+  { name: "Singer-songwriter" },
+  { name: "Ska" },
+  { name: "Sleep" },
+  { name: "Songwriter" },
+  { name: "Soul" },
+  { name: "Soundtracks" },
+  { name: "Spanish" },
+  { name: "Study" },
+  { name: "Summer" },
+  { name: "Synth-pop" },
+  { name: "Tango" },
+  { name: "Techno" },
+  { name: "Trance" },
+  { name: "Trip-hop" },
+  { name: "Work-out" },
+  { name: "World-music" },
+];
+
+const generateGenres = () => {
+  return genres.map((genre) => {
+    const { color, isLight } = uniqolor(genre.name, { format: "rgb" });
+    const rgbaColor = color.replace("rgb", "rgba");
+
+    return {
+      name: genre.name,
+      color: rgbaColor.replace(")", ", 0.6)"),
+      colorHover: rgbaColor.replace(")", ", 1)"),
+      textColor: isLight ? "#000" : "#fff",
+    };
+  });
+};
+
+console.log(JSON.stringify(generateGenres()));

src/components/Genre.tsx

@@ -0,0 +1,84 @@
+import {
+  Box,
+  Flex,
+  Space,
+  Text,
+  Title,
+  UnstyledButton,
+  createStyles,
+} from "@mantine/core";
+import { memo } from "react";
+import { genres } from "../utils/genres";
+import { useHover } from "@mantine/hooks";
+import { useSearchValues, useSetSearchValues } from "../providers/Search";
+
+const useStyles = createStyles((theme) => ({
+  item: {
+    width: 90,
+    height: 90,
+    backgroundColor:
+      theme.colorScheme === "dark"
+        ? theme.colors.dark[6]
+        : theme.colors.gray[0],
+    borderRadius: 10,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    padding: theme.spacing.xs,
+    transition: "background-color 0.2s",
+  },
+  text: {
+    fontSize: theme.fontSizes.sm,
+  },
+}));
+
+export const GenreList = memo(() => {
+  return (
+    <>
+      <Title order={2}>Moods & genres</Title>
+      <Space h="lg" />
+      <Flex gap={20} wrap="wrap">
+        {genres.map((genre) => (
+          <Genre genre={genre} />
+        ))}
+      </Flex>
+    </>
+  );
+});
+
+const Genre = memo(
+  ({
+    genre,
+  }: {
+    genre: {
+      name: string;
+      color: string;
+      colorHover: string;
+    };
+  }) => {
+    const { classes } = useStyles();
+    const { hovered, ref } = useHover();
+    const setSearchValues = useSetSearchValues();
+    const searchValues = useSearchValues();
+
+    const handleClick = () => {
+      setSearchValues({ ...searchValues, q: genre.name });
+    };
+
+    return (
+      <UnstyledButton onClick={handleClick}>
+        <Box
+          ref={ref}
+          className={classes.item}
+          style={{
+            border: `solid 4px ${genre.color}`,
+            backgroundColor: hovered ? genre.color : undefined,
+          }}
+        >
+          <Text className={classes.text}>{genre.name}</Text>
+        </Box>
+      </UnstyledButton>
+    );
+  }
+);

src/components/Popular.tsx

@@ -1,11 +1,16 @@
-import { LoadingOverlay } from "@mantine/core";
+import { Alert, LoadingOverlay, Text } from "@mantine/core";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "react-query";
 import { getPopuplars } from "../services/popular";
 import { CardList } from "./CardList";
+import { HorizontalGridList } from "./HorizontalGridList";
 
-export const Popular = memo(() => {
+interface PopularProps {
+  horizontal?: boolean;
+}
+
+export const Popular: React.FC<PopularProps> = memo(({ horizontal }) => {
   const query = useQuery("most-popular", () => getPopuplars());
   const { t } = useTranslation();
 
@@ -17,5 +22,21 @@ export const Popular = memo(() => {
     return <div>{t("error")}</div>;
   }
 
+  if (horizontal) {
+    if (!query.data.length) {
+      return (
+        <Alert title={t("recently.play.alert.title")}>
+          <Text>{t("recently.play.alert.message")}</Text>
+        </Alert>
+      );
+    }
+    return (
+      <HorizontalGridList
+        data={query.data.slice(0, 10)}
+        keyPrefix="horizontal-popular"
+      />
+    );
+  }
+
   return <CardList data={query.data} />;
 });

src/components/SearchBar.tsx

@@ -85,6 +85,9 @@ export const SearchBar = memo(() => {
     handleSubmit({ q: value });
   };
 
+  console.log(searchValues);
+  console.log(form.getInputProps("q"));
+
   return (
     <Flex align="center" gap={16} className={classes.container}>
       <Form

src/components/Trending.tsx

@@ -1,29 +1,52 @@
-import { LoadingOverlay } from "@mantine/core";
+import { Alert, LoadingOverlay, Text } from "@mantine/core";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "react-query";
 import { getTrendings } from "../services/trending";
 import { CardList } from "./CardList";
 import { useTrendingFiltersValues } from "../providers/TrendingFilters";
+import { HorizontalGridList } from "./HorizontalGridList";
 
-export const Trending = memo(() => {
-  const trendingFiltersValues = useTrendingFiltersValues();
-  const query = useQuery(
-    `trending-${trendingFiltersValues.type}-${trendingFiltersValues.region}`,
-    () => getTrendings(trendingFiltersValues),
-    {
-      enabled: Boolean(trendingFiltersValues.region),
+interface TrendingProps {
+  horizontal?: boolean;
+}
+
+export const Trending: React.FC<TrendingProps> = memo(
+  ({ horizontal = false }) => {
+    const trendingFiltersValues = useTrendingFiltersValues();
+    const query = useQuery(
+      `trending-${trendingFiltersValues.type}-${trendingFiltersValues.region}`,
+      () => getTrendings(trendingFiltersValues),
+      {
+        enabled: Boolean(trendingFiltersValues.region),
+      }
+    );
+    const { t } = useTranslation();
+
+    if (!query.data) {
+      return <LoadingOverlay visible />;
     }
-  );
-  const { t } = useTranslation();
 
-  if (!query.data) {
-    return <LoadingOverlay visible />;
-  }
+    if (query.error) {
+      return <div>{t("error")}</div>;
+    }
 
-  if (query.error) {
-    return <div>{t("error")}</div>;
-  }
+    if (horizontal) {
+      if (!query.data.length) {
+        return (
+          <Alert title={t("recently.play.alert.title")}>
+            <Text>{t("recently.play.alert.message")}</Text>
+          </Alert>
+        );
+      }
+      return (
+        <HorizontalGridList
+          data={query.data.slice(0, 10)}
+          keyPrefix="horizontal-trending"
+        />
+      );
+    }
 
-  return <CardList data={query.data} />;
-});
+    return <CardList data={query.data} />;
+  }
+);