Factor out heading components

annawng · Dec 14, 2023 · 7d00b64 · 7d00b64
1 parent ec56e26
commit 7d00b64
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 28 deletions.
diff --git a/app/(site)/albums/page.tsx b/app/(site)/albums/page.tsx
@@ -1,9 +1,10 @@
 import Albums from '@/components/Albums';
+import H1 from '@/components/H1';
 
 const AlbumsPage = () => {
   return (
     <>
-      <h1 className='font-bold text-4xl mb-6'>Saved albums</h1>
+      <H1>Saved albums</H1>
       <ul className='max-w-full grid grid-cols-[repeat(auto-fill,_minmax(120px,_1fr))] md:grid-cols-[repeat(auto-fill,_minmax(160px,_1fr))] lg:grid-cols-[repeat(auto-fill,_minmax(200px,_1fr))] grid-flow-row gap-8'>
         <Albums />
       </ul>

diff --git a/app/(site)/history/page.tsx b/app/(site)/history/page.tsx
@@ -1,9 +1,10 @@
 import Collection from '@/components/Collection';
+import H1 from '@/components/H1';
 
 const History = () => {
   return (
     <>
-      <h1 className='font-bold text-4xl mb-6'>Recently played</h1>
+      <H1>Recently played</H1>
       <Collection
         endpoint={`me/player/recently-played?limit=50`}
         isPlaylist

diff --git a/app/(site)/search/page.tsx b/app/(site)/search/page.tsx
@@ -11,6 +11,8 @@ import AlbumPreview from '@/components/AlbumPreview';
 import PlaylistPreview from '@/components/PlaylistPreview';
 import { CollectionType } from '@/components/Preview';
 import Row from '@/components/Row';
+import H1 from '@/components/H1';
+import H2 from '@/components/H2';
 
 const SearchPage = () => {
   const token = useToken();
@@ -80,10 +82,8 @@ const SearchPage = () => {
 
   return (
     <>
-      <h1 className='font-bold text-4xl mb-5'>
-        Search for a song, album, or playlist
-      </h1>
-      <section className='relative mb-10'>
+      <H1 className='mb-2 md:mb-4'>Search</H1>
+      <section className='relative mb-8 md:mb-10'>
         <Search
           size={20}
           className='absolute top-1/2 translate-y-[-50%] left-4'
@@ -92,13 +92,13 @@ const SearchPage = () => {
           type='search'
           placeholder='What do you want to listen to?'
           onChange={(e) => setQuery(e.target.value)}
-          className='w-96 rounded-full p-4 pl-12 bg-white/[0.03]'
+          className='w-full md:w-[480px] rounded-lg p-4 pl-12 bg-white/[0.03]'
         />
       </section>
       <section className='flex flex-col gap-8'>
         {tracks.length !== 0 && (
           <div>
-            <h2 className='font-semibold text-2xl mb-5'>Songs</h2>
+            <H2>Songs</H2>
             <ul>
               {tracks.map((track: TrackType) => (
                 <li key={track.uri}>
@@ -110,7 +110,7 @@ const SearchPage = () => {
         )}
         {albums.length !== 0 && (
           <div>
-            <h2 className='font-semibold text-2xl mb-5'>Albums</h2>
+            <H2>Albums</H2>
             <Row>
               {albums.map((album: CollectionType) => (
                 <li
@@ -125,7 +125,7 @@ const SearchPage = () => {
         )}
         {playlists.length !== 0 && (
           <div>
-            <h2 className='font-semibold text-2xl mb-5'>Playlists</h2>
+            <H2>Playlists</H2>
             <Row>
               {playlists.map((playlist: CollectionType) => (
                 <li

diff --git a/components/CollectionHeader.tsx b/components/CollectionHeader.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import H1 from './H1';
 
 const CollectionHeader = ({
   name,
@@ -25,9 +26,9 @@ const CollectionHeader = ({
         <p className='text-neutral-400 uppercase text-sm'>
           {isPlaylist ? 'Playlist' : 'Album'}
         </p>
-        <h1 className='font-bold text-5xl text-ellipsis overflow-hidden leading-tight'>
+        <H1 className='mb-0 text-ellipsis overflow-hidden leading-tight'>
           {name}
-        </h1>
+        </H1>
         <p className='font-medium'>{owner}</p>
       </div>
     </div>

diff --git a/components/H1.tsx b/components/H1.tsx
@@ -0,0 +1,17 @@
+const H1 = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <h1
+      className={`font-semibold lg:font-bold text-3xl md:text-4xl mb-6 ${className}`}
+    >
+      {children}
+    </h1>
+  );
+};
+
+export default H1;
diff --git a/components/H2.tsx b/components/H2.tsx
@@ -0,0 +1,13 @@
+const H2 = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <h2 className={`font-semibold text-2xl mb-5 ${className}`}>{children}</h2>
+  );
+};
+
+export default H2;
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import H1 from './H1';
 
 const Header = () => {
   const [message, setMessage] = useState<string>();
@@ -11,7 +12,7 @@ const Header = () => {
     );
   }, []);
 
-  return <h1 className='text-4xl font-bold'>{message}</h1>;
+  return <H1 className='mb-0'>{message}</H1>;
 };
 
 export default Header;
diff --git a/components/Library.tsx b/components/Library.tsx
@@ -38,7 +38,7 @@ const Library: FC<LibraryProps> = () => {
 
   return (
     <section>
-      <h2 className='uppercase text-sm text-neutral-400 pb-4'>Library</h2>
+      <p className='uppercase text-sm text-neutral-400 pb-4'>Library</p>
       <nav className='flex flex-col gap-6'>
         {routes.map((item) => (
           <SidebarItem key={item.label} {...item} />

diff --git a/components/Playlists.tsx b/components/Playlists.tsx
@@ -28,7 +28,7 @@ const Playlists = () => {
   return (
     <div className='h-full flex flex-col gap-4'>
       <div className='inline-flex items-center gap-x-2'>
-        <h2 className='text-neutral-400 uppercase text-sm'>Playlists</h2>
+        <p className='text-neutral-400 uppercase text-sm'>Playlists</p>
       </div>
       <div className='flex flex-col gap-2 overflow-y-scroll pb-6'>
         {playlists &&

diff --git a/components/RecentlyPlayed.tsx b/components/RecentlyPlayed.tsx
@@ -5,6 +5,7 @@ import fetchWebApi from '@/utils/fetchWebApi';
 import Preview, { CollectionType } from './Preview';
 import getArtists from '@/utils/getArtists';
 import Row from './Row';
+import H2 from './H2';
 
 interface CollectionWithType extends CollectionType {
   type: string;
@@ -78,7 +79,7 @@ const RecentlyPlayed = () => {
     <>
       {collections.length > 0 && (
         <section>
-          <h2 className='font-semibold text-2xl mb-5'>Jump back in </h2>
+          <H2>Jump back in </H2>
           <Row>
             {collections.map(({ type, ...rest }: CollectionWithType, index) => {
               return (

diff --git a/components/Recommended.tsx b/components/Recommended.tsx
@@ -6,6 +6,7 @@ import getArtists from '@/utils/getArtists';
 import AlbumPreview from './AlbumPreview';
 import { CollectionType } from './Preview';
 import Row from './Row';
+import H2 from './H2';
 
 const Recommended = () => {
   const token = useToken();
@@ -55,7 +56,7 @@ const Recommended = () => {
     <>
       {recommendations && (
         <section>
-          <h2 className='font-semibold text-2xl mb-5'>Recommended albums</h2>
+          <H2>Recommended albums</H2>
           <Row>
             {recommendations.map((recommendation: CollectionType, index) => (
               <li key={index} className='w-[120px] md:w-[160px] lg:w-[200px]'>

diff --git a/components/TopTracks.tsx b/components/TopTracks.tsx
@@ -3,15 +3,14 @@
 import { useState } from 'react';
 
 import Collection from './Collection';
+import H2 from './H2';
 
 const TopTracks = () => {
   const [isLoaded, setIsLoaded] = useState(false);
 
   return (
     <section>
-      {isLoaded && (
-        <h2 className='font-semibold text-2xl mb-5'>Your top tracks</h2>
-      )}
+      {isLoaded && <H2>Your top tracks</H2>}
       <Collection
         endpoint={`me/top/tracks?limit=5`}
         isPlaylist

diff --git a/components/Track.tsx b/components/Track.tsx
@@ -48,17 +48,19 @@ const Track = ({ track, index }: { track: TrackType; index?: number }) => {
         album && index
           ? 'grid-cols-[0.5fr_12fr_8fr_2fr]'
           : index
-          ? 'grid-cols-[0.5fr_12fr_2fr]'
+          ? 'grid-cols-[12fr_8fr_2fr] md:grid-cols-[0.5fr_12fr_2fr]'
           : 'grid-cols-[12fr_8fr_2fr]'
-      } grid-flow-row items-center gap-4 hover:bg-neutral-800 text-neutral-400 hover:text-white transition px-4 py-2 rounded-md [&>*]:min-w-full group`}
+      } grid-flow-row items-center gap-4 md:hover:bg-neutral-800 text-neutral-400 md:hover:text-white transition md:px-4 py-2 rounded-md [&>*]:min-w-full group cursor-pointer md:cursor-default`}
     >
       {index && (
         <div className='w-6'>
-          <p className='text-center group-hover:hidden'>{index}</p>
+          <p className='hidden text-center md:inline md:group-hover:hidden'>
+            {index}
+          </p>
           <Play
             size={24}
             title={`Play ${name} by ${artist}`}
-            className='text-white m-auto hidden group-hover:block cursor-pointer'
+            className='text-white m-auto hidden md:group-hover:block cursor-pointer'
             onClick={playTrack}
           />
         </div>
@@ -67,7 +69,7 @@ const Track = ({ track, index }: { track: TrackType; index?: number }) => {
         {image && (
           <div
             className={`relative shrink-0 ${
-              !index && 'group-hover:cursor-pointer'
+              !index && 'md:group-hover:cursor-pointer'
             }`}
           >
             <Image
@@ -76,15 +78,15 @@ const Track = ({ track, index }: { track: TrackType; index?: number }) => {
               width={48}
               height={48}
               className={`min-w-[48] ${
-                !index && 'group-hover:brightness-50 transition'
+                !index && 'md:group-hover:brightness-50 transition'
               }`}
             />
 
             {!index && (
               <Play
                 size={24}
                 title={`Play ${name} by ${artist}`}
-                className='text-white m-auto hidden group-hover:block absolute top-1/2 left-0 right-0 translate-y-[-50%]'
+                className='text-white m-auto hidden md:group-hover:block absolute top-1/2 left-0 right-0 translate-y-[-50%]'
                 onClick={playTrack}
               />
             )}
@@ -98,7 +100,7 @@ const Track = ({ track, index }: { track: TrackType; index?: number }) => {
       </div>
       {album && (
         <Link
-          className='truncate hover:underline cursor-pointer text-sm'
+          className='truncate md:hover:underline cursor-pointer text-sm'
           href={`/album/${album_id}`}
         >
           {album}