convert to next js app with tailwind

.gitignore

@@ -1 +1,33 @@
-.DS_Store
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

components/FilterMembers.js

@@ -0,0 +1,13 @@
+import {createContext, useState} from "react";
+
+export const FilterMembersStateContext = createContext();
+
+export const FilterMembersProvider = ({children}) => {
+    const [filtered, setFiltered] = useState(false);
+    const filter = {filtered, setFiltered};
+    return (
+        <FilterMembersStateContext.Provider value={filter}>
+            {children}
+        </FilterMembersStateContext.Provider>
+    );
+};

components/album.js

@@ -0,0 +1,48 @@
+import Track from "./track";
+
+const Album = ({ id, name, releaseDate, type, links, cover, members, tracks, units, currentMember  }) => {
+
+    return (
+        <>
+            <div key={id} className="container mx-auto lg:px-3 mb-10 lg:mb-12">
+                <div className="flex flex-nowrap items-start justify-between mb-6">
+                    <div className="flex flex-col">
+                        <h2 className="text-3xl mb-2">{name}</h2>
+                        <p>Release Date: {releaseDate}</p>
+                        <p>Type: {type}</p>
+                        <div className="flex flex-wrap gap-1">
+                            { links && links.map((link) => (
+                                <a href={link.url} target="_blank" className="text-sm px-2 py-1.5 rounded-full border border-nctu hover:bg-nctu">{link.type}</a>
+                            ))}
+                        </div>
+                    </div>
+                    <img className="h-24 w-24 p-px border border-black" src={`/${cover}`} alt="The 7th Sense Album Cover" />
+                </div>
+                <table className="table-fixed w-full">
+                    <thead className="text-xs text-left border-b border-black">
+                        <tr>
+                            <th className="p-1 w-5 lg:w-8">#</th>
+                            <th className="p-1 w-max lg:w-max">Track</th>
+                            <th className="p-1 w-1/4 lg:w-24 xl:w-32">Artist</th>
+                            <th className="p-1 w-1/4 lg:w-28 xl:w-36">Language</th>
+                            <th className="hidden lg:table-cell p-1 lg:w-1/2">Participating Members</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        { tracks.map((track) => (
+                            (!currentMember || (track.participating_members.includes(currentMember))) && <Track number={track.number}
+                            title={track.name}
+                            artist={track.artist}
+                            artistColor={units.find(unit => unit.name === track.artist)}
+                            language={track.language}
+                            trackMembers={track.participating_members}
+                            albumMembers={members} />
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+};
+
+export default Album;

components/header.js

@@ -0,0 +1,57 @@
+
+import { Switch } from '@headlessui/react'
+import Link from 'next/link'
+import { useContext } from 'react';
+import { FilterMembersStateContext } from './FilterMembers';
+
+export default function Header({ members, currentMember = { name: "All Members", slug: "" } }) {
+  const memberFilter = [{ name: "All Members", slug: "" }];
+  memberFilter.push(...members);
+
+  const { filtered, setFiltered } = useContext(FilterMembersStateContext);
+
+  return (
+    <div className="container mx-auto flex flex-wrap border-b border-gray-200
+              px-1 py-2 mb-4 pb-8
+              lg:flex-nowrap lg:px-3">
+      <div className="w-full mb-4
+              lg:w-1/3 lg:px-3 lg:mb-2">
+        <h1 className="text-2xl mb-1">NCT Discography</h1>
+        <p className="">This is an ongoing discography project designed to quickly and conveniently display which members participated in specific songs.</p>
+      </div>
+
+      <div className="w-full px-3 lg:w-2/3">
+        <div className="flex flex-nowrap justify-between mb-3">
+          <h1 className="text-2xl">Filter</h1>
+          <p>
+            <Switch
+              checked={filtered}
+              onChange={setFiltered}
+              className={`
+                ${filtered ? 'bg-nctu' : 'bg-gray-200'} 
+                relative inline-flex items-center h-5 rounded-full w-10 border
+              `}>
+              <span className="sr-only">Toggle non-participating members</span>
+              <span
+                className={`transform transition ease-in-out duration-200
+                  ${filtered ? 'translate-x-6' : 'translate-x-1'}
+                  inline-block w-3 h-3 transform bg-white rounded-full`}
+              />
+            </Switch> Hide non-participating members
+          </p>
+        </div>
+        <div className="flex flex-wrap justify-between gap-x-1 gap-y-1">
+          {memberFilter.map((member) => (
+            <Link key={member.slug} href={`/discography/${member.slug}`}>
+              <a className={`cursor-pointer text-sm px-2.5 py-1 rounded-full border border-nctu hover:bg-nctu
+                ${currentMember.slug === member.slug ? 'bg-nctu' : ''}
+              `}>
+                {member.name}
+              </a>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

components/track.js

@@ -0,0 +1,57 @@
+import { useContext } from 'react';
+import { FilterMembersStateContext } from '../components/FilterMembers'
+
+const Track = ({ number, title, artist, artistColor, language, trackMembers, albumMembers, currentMember }) => {
+    const { filtered } = useContext(FilterMembersStateContext);
+
+    const filteredMembers = [];
+    albumMembers.forEach(member => {
+        filteredMembers.push(
+            <span key={member}
+                className={`text-xs font-semibold rounded-full px-2 pt-1 pb-0.5
+                    ${title === `Switch (feat. SR15B)` && member === `Doyoung` 
+                    ? `bg-nctu text-black`
+                    : trackMembers.includes(member) ? `bg-${artistColor.color} text-${artistColor.text}`
+                        : filtered ? "hidden" : "bg-gray-100" 
+                    }
+                `}>
+                {member}
+            </span>
+        );
+        return filteredMembers;
+    });
+
+    return (
+        <>
+            <tr key={number} className="border-b border-gray-200">
+                <td className="px-1.5 pt-1.5 pb-2">
+                    {number}
+                </td>
+                <td className="px-1.5 pt-1.5 pb-2">
+                    {title}
+                </td>
+                <td className="px-1.5 pt-1.5 pb-2">
+                    {artist}
+                    {/* {artist.join(', ')} */}
+                </td>
+                <td className="px-1.5 pt-1.5 pb-2">
+                    {language.join(', ')}
+                </td>
+                <td className="hidden lg:table-cell px-1.5 pt-1.5 pb-2">
+                    <div className="flex flex-wrap justify-between gap-1">
+                        {filteredMembers}
+                    </div>
+                </td>
+            </tr>
+            <tr className="lg:hidden">
+                <td colSpan="4" className="px-1.5 pt-1.5 pb-2 border-b-2 border-gray-300">
+                    <div className="flex flex-wrap justify-between gap-1">
+                        {filteredMembers}
+                    </div>
+                </td>
+            </tr>
+        </>
+    );
+};
+
+export default Track;