complete components artists landing

lowisren · Jul 25, 2023 · 437c83e · 437c83e
1 parent 0b0cb26
commit 437c83e
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 35 deletions.
diff --git a/app/artists/[slug]/page.jsx → app/artist/[slug]/page.jsx b/app/artists/[slug]/page.jsx → app/artist/[slug]/page.jsx
@@ -1,3 +1,5 @@
+//Artist individual page: app/artist/[slug]/page.jsx
+
 import Image from "next/image";
 import Callout from "@/app/components/Callout";
 import CallToAction from "@/app/components/CallToAction";
@@ -87,7 +89,7 @@ async function getArtist(slug) {
     return (
         <main className="flex flex-col justify-between w-full mx-auto bg-gray-600">
              <Image
-                className="w-4/5 mx-auto mt-12 shadow-lg dark:shadow-black/20"
+                className="w-1/2 mx-auto mt-12 shadow-lg dark:shadow-black/20"
                 src={artistData.artistImage.url}
                 width={artistData.artistImage.width}
                 height={artistData.artistImage.height}
@@ -133,6 +135,6 @@ async function getArtist(slug) {
           </div>
         </div>
       </section>
-        </main>
-    );
-  }
+    </main>
+  );
+}
diff --git a/app/artists/page.jsx b/app/artists/page.jsx
@@ -0,0 +1,67 @@
+//Landing page for all artists: app/artists/page.jsx
+
+import Image from 'next/image';
+import Link from "next/link";
+
+//Get all Artists
+
+async function getAllArtists() {
+  const response = await fetch(process.env.HYGRAPH_ENDPOINT, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      query: `
+      query Artists {
+        artists {
+          slug
+          artist
+          id
+          artistImage {
+            altText
+            url
+            height
+            width
+          }
+        }
+      }`,
+    }),
+  });
+  const json = await response.json();
+  return json.data.artists;
+}
+
+export default async function Artists() {
+  const artists = await getAllArtists();
+  //console.log(artists);
+  return (
+    <main className="flex flex-col justify-between">
+      <section className="mb-32 text-center">
+      <h2 className="my-12 text-5xl font-bold">
+      All<span className="text-[hsl(218,81%,75%)] px-2 py-2">Artists</span>
+      </h2>
+      <div className="grid px-5 lg:gap-xl-12 gap-x-6 md:grid-cols-2 lg:grid-cols-4">
+        {artists.map((artist) => {
+          return (
+            <div key={artist.id} className="px-2 pb-5 my-12 rounded-lg lg:mb-0 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] background-radial-gradient">
+              <Image
+                className="mx-auto my-6 rounded-lg shadow-lg dark:shadow-black/20 w-[350px] h-[175px]"
+                src={artist.artistImage.url}
+                width={artist.artistImage.width}
+                height={artist.artistImage.height}
+                alt={artist.artistImage.altText}
+              />
+              <Link 
+                className="text-xl font-bold text-white underline" 
+                href={`/artist/${artist.slug}`}>
+                  {artist.artist}
+              </Link>
+            </div>
+          );  
+          })}
+      </div>
+    </section>
+  </main>
+  )
+}
diff --git a/app/components/CallToAction.js b/app/components/CallToAction.js
@@ -1,18 +1,16 @@
+// CTA component: app/components/CallToAction.js
+
 import Link from "next/link";
 import Image from "next/image";
 
 export default function CallToAction({body, heading, button, image}) {
     return (
         <section className="mb-32 bg-gray-800">
             <div className="px-6 py-12 text-center md:px-12">
-                <div className="container mx-auto xl:px-32">
+                <div className="container mx-auto">
                 <h2 className="mb-12 text-3xl font-bold tracking-tight md:text-4xl text-[hsl(218,81%,95%)]">{heading}</h2>
-                    <div className="grid items-center gap-12 lg:grid-cols-2">
-                        <div className="mt-12 lg:mt-0">
-                           <div className="mb-12 text-white text-md" dangerouslySetInnerHTML={{ __html: body.html }} />
-                           {button ? <Link className="inline-block py-3 mr-2 font-medium leading-snug text-gray-700 uppercase bg-gray-200 rounded shadow-md text-md px-7 hover:bg-gray-800 hover:shadow-lg hover:text-white" href={button.url} role="button">{button.text}</Link> : ''}
-                        </div>
-                        {image ? <div className="mb-12 lg:mb-0">
+                    <div className="grid items-center gap-12 sm:gap-3 lg:grid-cols-2">
+                        {image ? <div className="mb-6 lg:mb-0">
                             <Image
                             className="w-full rounded-lg shadow-lg"
                             src={image.url}
@@ -21,6 +19,10 @@ export default function CallToAction({body, heading, button, image}) {
                             height={image.height}
                             />
                         </div> : ''}
+                        <div className="mt-6 lg:mt-0">
+                           <div className="mb-12 text-white text-md" dangerouslySetInnerHTML={{ __html: body.html }} />
+                           {button ? <Link className="inline-block py-3 mr-2 font-medium leading-snug text-gray-700 uppercase bg-gray-200 rounded shadow-md text-md px-7 hover:bg-gray-800 hover:shadow-lg hover:text-white" href={button.url} role="button">{button.text}</Link> : ''}
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/app/components/Callout.js b/app/components/Callout.js
@@ -1,3 +1,5 @@
+// Callout component: app/components/Callout.js
+
 import Link from "next/link";
 
 
@@ -9,4 +11,4 @@ export default function Callout({button, title}) {
             {button ? <Link className="inline-block py-3 mt-4 mr-2 text-sm font-medium leading-snug text-gray-700 uppercase bg-gray-200 rounded shadow-md px-7 hover:bg-gray-800 hover:shadow-lg hover:text-white" href={button.url} role="button">{button.text}</Link> : ''}
         </div>
     )
-}
+}
diff --git a/app/components/Footer.js b/app/components/Footer.js
@@ -0,0 +1,46 @@
+// Footer component: app/components/Footer.js
+
+import Link from 'next/link';
+
+export default function Footer() {
+    return (
+        <footer className="bg-gray-800">
+            <div className="container flex flex-col items-center justify-between px-6 py-12 mx-auto md:flex-row">
+                <a href="#" className="text-3xl font-bold text-white hover:text-gray-300">HyFM</a>
+                <p className="mt-4 text-sm text-white md:mt-0">© 2023 HyFM —
+                    <Link href="/" className="ml-1 text-gray-400 hover:text-gray-300" rel="noopener noreferrer" target="_blank">@hyfm </Link>
+                </p>
+                <div className="flex mt-4 mb-2 -mx-2 md:mt-0 md:mb-0">
+                    <Link href="#" className="mx-2 text-white hover:text-gray-300" aria-label="Linkden">
+                        <svg className="w-4 h-4 fill-current" viewBox="0 0 512 512">
+                            <path d="M437.019,0H74.981C33.629,0,0,33.629,0,74.981v362.038C0,478.371,33.629,512,74.981,512h362.038
+                                C478.371,512,512,478.371,512,437.019V74.981C512,33.629,478.371,0,437.019,0z M154.854,416H92.308V200.923h62.545V416z
+                                M123.581,173.846c-20.654,0-37.423-16.769-37.423-37.423c0-20.654,16.769-37.423,37.423-37.423
+                                c20.654,0,37.423,16.769,37.423,37.423C161.004,157.077,144.235,173.846,123.581,173.846z M416,416h-62.545V299.077
+                                c0-24.654-0.469-56.308-34.308-56.308c-34.308,0-39.654,26.769-39.654,54.462V416h-62.545V200.923h59.115v28.923h0.831
+                                c8.231-15.577,28.308-32.062,58.308-32.062c62.769,0,74.154,41.346,74.154,95.115V416z"/>
+                        </svg>
+                    </Link>
+                    <Link href="#" className="mx-2 text-white hover:text-gray-300" aria-label="Facebook">
+                        <svg className="w-4 h-4 fill-current" viewBox="0 0 512 512">
+                            <path d="M437,0H75C33.6,0,0,33.6,0,75v362c0,41.4,33.6,75,75,75h362c41.4,0,75-33.6,75-75V75C512,33.6,478.4,0,437,0z M480,437
+                                c0,24.9-20.1,45-45,45H75c-24.9,0-45-20.1-45-45V75c0-24.9,20.1-45,45-45h362c24.9,0,45,20.1,45,45V437z"/>
+                            <path d="M341.3,164.7h-51.2c-14.1,0-25.6,11.5-25.6,25.6v51.2h-51.2v51.2h51.2v153.6h51.2V292.3h51.2l25.6-51.2h-76.8v-25.6
+                                C366.9,176.2,355.4,164.7,341.3,164.7z"/>
+                        </svg>
+                    </Link>
+                    <Link href="#" className="mx-2 text-white hover:text-gray-300" aria-label="Twitter">
+                        <svg className="w-4 h-4 fill-current" viewBox="0 0 512 512">
+                            <path d="M437,0H75C33.6,0,0,33.6,0,75v362c0,41.4,33.6,75,75,75h362c41.4,0,75-33.6,75-75V75C512,33.6,478.4,0,437,0z M384,188.8
+                                c0,0.3,0,0.6,0,0.9c0,114.7-87.4,246.9-246.9,246.9c-49.1,0-94.9-14.3-133.3-39.1c7.1,0.8,14.3,1.2,21.6,1.2
+                                c42,0,80.5-14.3,111.4-38.5c-39.3-0.8-72.3-26.6-83.7-62.3c5.5,1.2,11.1,1.8,16.9,1.8c8.2,0,16.3-1.2,23.9-3.4
+                                c-41.4-8.2-72.3-44.7-72.3-88.5v-1.2c12.1,6.7,26.1,10.7,41.2,11.3c-24.5-16.3-40.5-44.1-40.5-75.4c0-16.3,4.1-31.4,11.3-44.7
+                                c41.2,50.3,103.9,83.7,174.1,87.4c-1.8-8.2-2.9-16.6-2.9-25.1c0-60.3,48.9-109.2,109.2-109.2c31.4,0,59.2,13.4,78.8,34.7
+                                c24.5-4.1,47.5-13.4,68.6-26.1c-8.2,25.1-25.1,46.2-47.5,59.2c21.6-2.9,42-8.2,61.1-16.6C448.8,153.6,418.7,174.7,384,188.8z"/>
+                        </svg>
+                    </Link>
+                </div>
+            </div>
+        </footer>
+    )
+}
diff --git a/app/components/Header.js b/app/components/Header.js
@@ -1,3 +1,4 @@
+// Header component: app/components/Header.js
 
 export default function Header() {
     return (
@@ -6,7 +7,7 @@ export default function Header() {
     <div className="container mx-auto">
     <div className="grid items-center gap-12 lg:grid-cols-2">
         <div className="mt-12 lg:mt-0">
-        <h1 className="mb-12 text-5xl font-bold tracking-tight text-[hsl(218,81%,95%)] md:text-6xl xl:text-7xl">
+        <h1 className="mb-12 text-3xl font-bold tracking-tight text-[hsl(218,81%,95%)] md:text-6xl xl:text-7xl">
             Hygraph<span className="text-[hsl(218,81%,75%)]">FM</span>
         </h1>
         <p className="text-lg text-[hsl(218,81%,95%)]">

diff --git a/app/components/Navbar.js b/app/components/Navbar.js
@@ -1,3 +1,5 @@
+// Navbar component: app/components/Navbar.js
+
 'use client';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -7,24 +9,19 @@ import { useState } from 'react';
 export default function Navbar() {
   const [navbar, setNavbar] = useState(false);
   return (
-    <div>
-      <Head>
-        <title>Create Next Responsive Navbar With Tailwind CSS</title>
-        <meta
-          name="description"
-          content="Create Next JS Responsive Menu with Tailwind CSS"
-        />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <nav className="w-full bg-gray-800 shadow">
+      <nav aria-label="Hygraph FM Menu" role="navigation" className="w-full bg-gray-800 shadow">
         <div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
           <div>
             <div className="flex items-center justify-between py-3 md:py-5 md:block">
-              <a href="#">
+              <Link href="/">
                 <h2 className="text-3xl font-bold text-[hsl(218,81%,75%)]">HyFM</h2>
-              </a>
+              </Link>
               <div className="md:hidden">
                 <button
+                  aria-label="Toggle Hamburger menu"
+                  aria-expanded="false"
+                  aria-controls="main-menu"
+                  aria-haspopup="true"
                   className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
                   onClick={() => setNavbar(!navbar)}
                 >
@@ -67,24 +64,27 @@ export default function Navbar() {
                 navbar ? 'block' : 'hidden'
               }`}
             >
-              <ul className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
+              <ul 
+              role="menubar" 
+              aria-label="HygraphFM Menu Bar" 
+              className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
                 <li className="text-white">
-                  <Link href="/">
+                  <Link role="menuitem" href="/">
                     Home
                   </Link>
                 </li>
                 <li className="text-white">
-                  <Link href="/artists">
+                  <Link role="menuitem" href="/artists">
                     Artists
                   </Link>
                 </li>
                 <li className="text-white">
-                  <Link href="/login">
+                  <Link role="menuitem" href="/login">
                     Login
                   </Link>
                 </li>
                 <li className="text-white">
-                  <Link href="/contact">
+                  <Link role="menuitem" href="/contact">
                     Contact US          
                   </Link>
                 </li>
@@ -93,6 +93,5 @@ export default function Navbar() {
           </div>
         </div>
       </nav>
-    </div>
   );
 }
diff --git a/app/layout.js b/app/layout.js
@@ -2,6 +2,7 @@ import './globals.css';
 import { Inter } from 'next/font/google';
 import Header from './components/Header';
 import Navbar from './components/Navbar';
+import Footer from './components/Footer';
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -17,6 +18,7 @@ export default function RootLayout({ children }) {
       <Navbar />
       <Header />
       {children}
+      <Footer />
       </body>
     </html>
   )

diff --git a/app/page.js b/app/page.js
@@ -1,3 +1,5 @@
+//Homepage with featured artists: app/page.js
+
 import Image from 'next/image';
 import Link from "next/link";
 
@@ -12,7 +14,7 @@ async function getArtists() {
     body: JSON.stringify({
       query: `
       query Artists {
-        artists(last: 4) {
+        artists(last: 6) {
           slug
           artist
           id
@@ -36,13 +38,13 @@ export default async function Home() {
   return (
     <main className="flex flex-col justify-between">
       <section className="mb-32 text-center">
-      <h2 className="mb-12 text-3xl font-bold">
+      <h2 className="my-12 text-5xl font-bold">
       Featured <span className="text-[hsl(218,81%,75%)] px-2 py-2">Artists</span>
       </h2>
       <div className="grid px-5 lg:gap-xl-12 gap-x-6 md:grid-cols-2 lg:grid-cols-4">
         {artists.map((artist) => {
           return (
-            <div key={artist.id} className="px-2 pb-5 mb-12 rounded-lg lg:mb-0 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] background-radial-gradient">
+            <div key={artist.id} className="px-2 pb-5 my-12 rounded-lg lg:mb-0 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] background-radial-gradient">
               <Image
                 className="mx-auto my-6 rounded-lg shadow-lg dark:shadow-black/20 w-[350px] h-[175px]"
                 src={artist.artistImage.url}
@@ -52,7 +54,7 @@ export default async function Home() {
               />
               <Link 
                 className="text-xl font-bold text-white underline" 
-                href={`/artists/${artist.slug}`}>
+                href={`/artist/${artist.slug}`}>
                   {artist.artist}
               </Link>
             </div>