blog layout

faradayafrica · Aug 5, 2023 · e247a54 · e247a54
1 parent 0b0cb04
commit e247a54
Show file tree

Hide file tree

Showing 13 changed files with 144 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
     "@types/node": "20.4.4",
     "@types/react": "18.2.16",
     "@types/react-dom": "18.2.7",

diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
@@ -1,6 +1,4 @@
 import CommentComp from '@/components/CommentComp';
-import Footer from '@/components/Footer';
-import Navigation from '@/components/Navigation';
 import ReadLikely from '@/components/ReadLikely';
 import ShareLink from '@/components/ShareLink';
 import { TypographyH1, TypographyH2 } from '@/components/Typography';
@@ -9,8 +7,6 @@ import Image from 'next/image';
 export default function BlogDetails({ params }: { params: { slug: string } }) {
   return (
     <>
-      <Navigation />
-
       <main className='container my-14'>
         <article className='max-w-[800px] my-14'>
           <div className='space-y-5'>
@@ -94,10 +90,8 @@ export default function BlogDetails({ params }: { params: { slug: string } }) {
 
         <ReadLikely />
 
-        <CommentComp />
+        {/* <CommentComp /> */}
       </main>
-
-      <Footer />
     </>
   );
 }
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
@@ -1,5 +1,3 @@
-import Footer from '@/components/Footer';
-import Navigation from '@/components/Navigation';
 import ReadLikely from '@/components/ReadLikely';
 import ReadMore from '@/components/ReadMore';
 import { TypographyH1 } from '@/components/Typography';
@@ -13,7 +11,6 @@ export const metadata: Metadata = {
 function BlogPage() {
   return (
     <>
-      <Navigation />
       <main className='container my-14'>
         <TypographyH1>
           The Faraday <span className='text-brandColor'>Blog</span>
@@ -23,7 +20,6 @@ function BlogPage() {
 
         <ReadMore />
       </main>
-      <Footer />
     </>
   );
 }

diff --git a/src/app/blog/tags/page.tsx b/src/app/blog/tags/page.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { TypographyH1, TypographyH3 } from '@/components/Typography';
+import BlogCard from '@/components/BlogCard';
+import Tags from '@/components/Tags';
+import SearchIcon from '@/images/search-icon.svg';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Faraday - Tags',
+};
+
+function TagPage() {
+  return (
+    <>
+      <main className='container my-14'>
+        <TypographyH1>
+          The Faraday <span className='text-brandColor'>Blog</span>
+        </TypographyH1>
+
+        <section className='grid md:grid-cols-12 gap-16 mt-20'>
+          <div className='md:col-span-8 @container '>
+            <TypographyH3>Tech</TypographyH3>
+
+            <div className='@lg:grid-cols-2 grid md:grid-cols-2 gap-3 mt-6'>
+              <BlogCard />
+              <BlogCard />
+              <BlogCard />
+              <BlogCard />
+              <BlogCard />
+              <BlogCard />
+            </div>
+          </div>
+
+          <div className='md:col-span-4 hidden md:block'>
+            <div className='flex bg-white rounded-md  items-center mb-6'>
+              <input
+                type='text'
+                name=''
+                id=''
+                className='p-3 w-full outline-none rounded-md'
+                placeholder='Search tags'
+              />
+              <button className='pr-3'>
+                <SearchIcon width={24} />
+              </button>
+            </div>
+
+            <Tags horizontal />
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
+
+export default TagPage;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import '@/styles/globals.css';
 import { Roboto } from 'next/font/google';
+import Navigation from '@/components/Navigation';
+import Footer from '@/components/Footer';
 
 const roboto = Roboto({
   subsets: ['latin'],
@@ -14,7 +16,9 @@ const RootLayout = ({ children }: React.PropsWithChildren) => {
       <body
         className={` ${roboto.className}bg-[rgb(252,224,176)] bg-[linear-gradient(146deg,_rgba(252,224,176,1)_0%,_rgba(255,255,255,0.8847303029052023)_56%,_rgba(154,255,255,1)_100%)] `}
       >
+        <Navigation />
         {children}
+        <Footer />
       </body>
     </html>
   );

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -24,18 +24,18 @@ function Footer() {
               <li className='cursor-pointer'>
                 <Link href={'https://app.faraday.africa/signup'}>Sign up</Link>
               </li>
-              {/* <li>
-          <a href=''>Download app</a>
-        </li> */}
+              <li>
+                <a href='#'>Download app</a>
+              </li>
             </ul>
           </div>
           <div className='col-start-1 row-start-2 md:col-start-3 md:row-start-1'>
             <h5 className='font-medium'>Company</h5>
             <ul className='mt-1'>
               <li className='cursor-pointer'>About Faraday</li>
-              {/* <li>
-          <a href=''>Advertise with us</a>
-        </li> */}
+              <li>
+                <a href='#'>Advertise with us</a>
+              </li>
               <li className='cursor-pointer'>Terms of use</li>
               <li className='cursor-pointer'>Privacy policy</li>
             </ul>
@@ -56,6 +56,9 @@ function Footer() {
               <li>
                 <a href='https://events.faraday.africa/gallery'>Gallery</a>
               </li>
+              <li>
+                <a href='#'>Social impact</a>
+              </li>
               {/* <li>
           <a href=''>Social impact</a>
         </li> */}

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -26,7 +26,7 @@ const links = [
 export default function Navigation() {
   const [hamClicked, setHamClicked] = useState(false);
   return (
-    <nav className=' flex items-center justify-between container pt-3  font-semibold'>
+    <nav className=' flex items-center justify-between container pt-4  font-semibold'>
       <div className='md:hidden flex justify-between items-center w-full '>
         <Link href={'/'} className='block'>
           <Logo className='w-[120px]' />
@@ -38,10 +38,11 @@ export default function Navigation() {
           <span className='w-3 h-[2px] bg-black rounded-sm block  ml-auto'></span>
         </button>
 
+        {/* Mobile */}
         {hamClicked && (
-          <div className='fixed md:hidden w-full bottom-0 left-0 h-screen bg-[rgb(252,224,176)] bg-[linear-gradient(146deg,_rgba(252,224,176,1)_0%,_rgba(255,255,255,0.8847303029052023)_56%,_rgba(154,255,255,1)_100%)] flex justify-center flex-col'>
+          <div className='fixed md:hidden w-full bottom-0 left-0 h-screen bg-[rgb(252,224,176)] bg-[linear-gradient(146deg,_rgba(252,224,176,1)_0%,_rgba(255,255,255,0.8847303029052023)_56%,_rgba(154,255,255,1)_100%)] flex justify-center flex-col z-[1000]'>
             <div className='container relative'>
-              <div className='fixed top-0 w-[inherit] flex self-start justify-between items-center pt-3'>
+              <div className='fixed top-0 w-[inherit] flex self-start justify-between items-center pt-4'>
                 <Link href={'/'} className='block'>
                   <Logo className='w-[120px]' />
                 </Link>

diff --git a/src/components/ReadMore.tsx b/src/components/ReadMore.tsx
@@ -3,15 +3,25 @@ import { TypographyH3 } from './Typography';
 import Tags from './Tags';
 import BlogCard from './BlogCard';
 import Smile from '@/images/smile.svg';
+import TagIcon from '@/images/tab-icon.svg';
+import Link from 'next/link';
 
 function ReadMore() {
   return (
     <div className='my-6 '>
       <div className='space-y-4'>
-        <TypographyH3>
-          More stuff you could read
-          <Smile className='w-[35px]' />
-        </TypographyH3>
+        <div className='flex justify-between items-center'>
+          <TypographyH3>
+            More stuff you could read
+            <Smile className='w-[35px]' />
+          </TypographyH3>
+
+          <Link href='/blog/tags' className='block md:hidden'>
+            <button aria-label='all tag'>
+              <TagIcon width={24} />
+            </button>
+          </Link>
+        </div>
 
         <Tags />
       </div>

diff --git a/src/components/Tags.tsx b/src/components/Tags.tsx
@@ -1,26 +1,50 @@
+import Link from 'next/link';
 import React from 'react';
 
+type TagsProps = {
+  horizontal?: boolean;
+};
+
 const tags = [
   'TECH',
   'PHILOSOPHY',
   'EDUCATION',
-  'TECH',
-  'PHILOSOPHY',
-  'EDUCATION',
+  'Food',
+  'ARTS & CULTURE',
+  'FASHION & BEAUTY',
 ];
 
-function Tags() {
+function Tags({ horizontal }: TagsProps) {
+  if (horizontal) {
+    return (
+      <div className='flex flex-col gap-3'>
+        {tags.map((tag, i) => (
+          <button
+            key={i}
+            className='border uppercase rounded-lg w-fit border-[#BFC9D2] px-3 py-1'
+          >
+            {tag}
+          </button>
+        ))}
+      </div>
+    );
+  }
   return (
-    <div className='flex gap-3'>
+    <div className='gap-3 hidden md:flex'>
       {tags.map((tag, i) => (
-        <button key={i} className='border rounded-lg border-[#BFC9D2] p-3 py-2'>
+        <button
+          key={i}
+          className='border uppercase rounded-lg border-[#BFC9D2] px-3 py-1'
+        >
           {tag}
         </button>
       ))}
 
-      <button className='uppercase rounded-lg bg-[#101314] p-3 py-2 font-bold text-[#9AE2B3]'>
-        All tags
-      </button>
+      <Link href='/blog/tags' className='block'>
+        <button className='uppercase rounded-lg bg-[#101314] p-3 py-2 font-bold text-[#9AE2B3]'>
+          All tags
+        </button>
+      </Link>
     </div>
   );
 }

diff --git a/src/images/search-icon.svg b/src/images/search-icon.svg
diff --git a/src/images/tab-icon.svg b/src/images/tab-icon.svg
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -28,5 +28,5 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/container-queries')],
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,5 +28,5 @@ module.exports = { @@
           },
         },
       },
-      plugins: [],
+      plugins: [require('@tailwindcss/container-queries')],
     };