callout cta navbar

lowisren · Jul 19, 2023 · 0b0cb26 · 0b0cb26
1 parent 1695e9f
commit 0b0cb26
Show file tree

Hide file tree

Showing 7 changed files with 204 additions and 24 deletions.
diff --git a/app/artists/[slug]/page.jsx b/app/artists/[slug]/page.jsx
@@ -1,6 +1,6 @@
-//import Hero from "@/app/components/Hero";
-import Callout from "@/app/components/Callout";
 import Image from "next/image";
+import Callout from "@/app/components/Callout";
+import CallToAction from "@/app/components/CallToAction";
 
 async function getArtist(slug) {
     const response = await fetch(process.env.HYGRAPH_ENDPOINT, {
@@ -50,6 +50,24 @@ async function getArtist(slug) {
                       }
                       title
                     }
+                    ... on CallToAction {
+                      __typename
+                      id
+                      button {
+                        text
+                        url
+                      }
+                      heading
+                      image {
+                        altText
+                        height
+                        width
+                        url
+                      }
+                      body {
+                        html
+                      }
+                    }
                   }
                 }
               }`,
@@ -60,21 +78,28 @@ async function getArtist(slug) {
       }
     );
     const data = await response.json();
-    console.log(data.data.artist);
+    //console.log(data.data.artist);
     return data.data.artist
   }
 
   export default async function Artist({ params }) {
     const artistData = await getArtist(params.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"
+                src={artistData.artistImage.url}
+                width={artistData.artistImage.width}
+                height={artistData.artistImage.height}
+                alt={artistData.artistImage.altText}
+                />
         <section className="p-12">
-          <div className="container mx-auto text-center lg:text-left xl:px-32">
+          <div className="container mx-auto text-center xl:px-32">
             <div className="grid items-center lg:grid-cols-2">
               <div className="mb-12 lg:mb-0">
-                <div className="relative z-[1] block rounded-lg bg-[hsla(0,0%,100%,0.55)] px-6 py-12 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] backdrop-blur-[30px] dark:bg-[hsla(0,0%,2%,0.55)] dark:shadow-black/20 md:px-12 lg:mr-16">
-                    <h2 className="mb-3 text-3xl font-bold text-left text-white">{artistData.artist}</h2>
-                    <p className="text-white all-links" dangerouslySetInnerHTML={{ __html: artistData.lastFm.artist.bio.summary }}>
+                <div className="relative z-[1] block bg-[hsla(0,0%,100%,0.55)] px-6 py-16 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] backdrop-blur-[30px] dark:bg-[hsla(0,0%,2%,0.55)] dark:shadow-black/20 md:px-12 lg:mr-16">
+                    <h2 className="mb-3 text-4xl font-bold text-white">{artistData.artist}</h2>
+                    <p className="text-left text-white all-links" dangerouslySetInnerHTML={{ __html: artistData.lastFm.artist.bio.summary }}>
                     </p>
                     <h3 className="my-4 text-xl font-bold text-center">Similar Artists</h3>
                         {artistData.lastFm.artist.similar.artist.map((similar) => {
@@ -89,23 +114,21 @@ async function getArtist(slug) {
                         return (
                           <div className="inline-grid grid-cols-1 gap-2 mb-2">
                             <span className="px-2 py-2 ml-2 text-sm font-bold text-black rounded-sm bg-[hsla(0,0%,100%,0.55)]">{tag.name}</span>
-                            </div>
+                          </div>
                         );
                         })}
                 </div>
               </div>
             <div>
-                <Image
-                className="w-full rounded-lg shadow-lg dark:shadow-black/20"
-                src={artistData.artistImage.url}
-                width={artistData.artistImage.width}
-                height={artistData.artistImage.height}
-                alt={artistData.artistImage.altText}
-                />
-                <Callout
-                title={artistData.promotionalBlock.title}
-                button={artistData.promotionalBlock.button}
-                />
+                {artistData.promotionalBlock.map((block) => {
+                  if (block.__typename === 'Callout') {
+                    return <Callout key={block.id} title={block.title} button={block.button}/>
+                  }
+                  if (block.__typename === 'CallToAction') {
+                    return <CallToAction key={block.id} heading={block.heading} body={block.body} button={block.button} image={block.image} 
+                    />
+                  }
+                })}
             </div>
           </div>
         </div>

diff --git a/app/components/CallToAction.js b/app/components/CallToAction.js
@@ -0,0 +1,30 @@
+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">
+                <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">
+                            <Image
+                            className="w-full rounded-lg shadow-lg"
+                            src={image.url}
+                            alt={image.altText}
+                            width={image.width}
+                            height={image.height}
+                            />
+                        </div> : ''}
+                    </div>
+                </div>
+            </div>
+  </section>
+    )
+
+}
diff --git a/app/components/Callout.js b/app/components/Callout.js
@@ -1,12 +1,12 @@
 import Link from "next/link";
 
 
-export default function Callout({button,  title}) {
+export default function Callout({button, title}) {
     return (
-        <div class="mt-8  background-radial-gradient block rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
-            <h5 class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">{title}
-            </h5>
-            {button ? <Link className="inline-block py-3 mr-2 text-sm font-medium leading-snug text-gray-700 uppercase transition duration-150 ease-in-out bg-gray-200 rounded shadow-md px-7 hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg" data-mdb-ripple="true" data-mdb-ripple-color="light" href={button.url} role="button">{button.text}</Link> : ' '}
+        <div className="block p-16 mb-8 background-radial-gradient">
+            <h4 className="text-3xl font-bold leading-tight text-neutral-800 dark:text-neutral-50">{title}
+            </h4>
+            {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/Navbar.js b/app/components/Navbar.js
@@ -0,0 +1,98 @@
+'use client';
+import Head from 'next/head';
+import Link from 'next/link';
+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">
+        <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="#">
+                <h2 className="text-3xl font-bold text-[hsl(218,81%,75%)]">HyFM</h2>
+              </a>
+              <div className="md:hidden">
+                <button
+                  className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
+                  onClick={() => setNavbar(!navbar)}
+                >
+                  {navbar ? (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="w-6 h-6 text-white"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  ) : (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="w-6 h-6 text-white"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M4 6h16M4 12h16M4 18h16"
+                      />
+                    </svg>
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div
+              className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
+                navbar ? 'block' : 'hidden'
+              }`}
+            >
+              <ul className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
+                <li className="text-white">
+                  <Link href="/">
+                    Home
+                  </Link>
+                </li>
+                <li className="text-white">
+                  <Link href="/artists">
+                    Artists
+                  </Link>
+                </li>
+                <li className="text-white">
+                  <Link href="/login">
+                    Login
+                  </Link>
+                </li>
+                <li className="text-white">
+                  <Link href="/contact">
+                    Contact US          
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
+  );
+}
diff --git a/app/layout.js b/app/layout.js
@@ -1,6 +1,7 @@
 import './globals.css';
 import { Inter } from 'next/font/google';
 import Header from './components/Header';
+import Navbar from './components/Navbar';
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -13,6 +14,7 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={inter.className}>
+      <Navbar />
       <Header />
       {children}
       </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.15",
+    "@heroicons/react": "^2.0.18",
     "autoprefixer": "10.4.14",
     "eslint": "8.43.0",
     "eslint-config-next": "13.4.7",