Test V1 BlogTemplates Switch

components/BlogTemplates/GridCols.js

@@ -0,0 +1,58 @@
+import ImageComponentity from '../ImageComponentity'
+import SVGCategory from '../SVG/SVGCategory'
+import SVGClock from '../SVG/SVGClock'
+import Link from 'next/link'
+
+export default function GridCols({ blog_pack, section }) {
+  return (
+    <div
+      key={blog_pack.blog.id}
+      className='mb-10 rounded overflow-hidden flex flex-col justify-between mx-auto'
+    >
+      <Link href={`/blog/${blog_pack.blog.slug}`}>
+        <a
+          aria-label='Blog post'
+          className='dark:text-gray-50 dark:hover:text-indigo-600 hover:text-indigo-600 transition duration-500 ease-in-out inline-block mb-2'
+        >
+          <h1 className='text-xl font-semibold line-clamp-3 h-20 mb-2'>
+            {blog_pack.blog.title.rendered}
+          </h1>
+        </a>
+      </Link>
+      <div>
+        <Link href={`/blog/${blog_pack.blog.slug}`}>
+          <a aria-label='Blog post'>
+            {blog_pack.blog.featured_media != 0 && blog_pack.blog.featured_media ? (
+              <ImageComponentity
+                src={blog_pack.blog._embedded['wp:featuredmedia'][0].source_url}
+                classes={section.imageClasses}
+                alt={blog_pack.blog.title.rendered}
+              />
+            ) : (
+              <div className={`${section.heightClass} w-full bg-gray-100`}></div>
+            )}
+          </a>
+        </Link>
+        <div className='py-5 text-sm font-regular text-gray-900 dark:text-gray-300 flex justify-between items-center'>
+          <span className='mr-3 flex flex-row gap-1 items-center'>
+            <SVGClock />
+            <span className='ml-1'>{blog_pack.blog.date}</span>
+          </span>
+          <span className='flex flex-row gap-1 items-center hover:text-indigo-600 dark:hover:text-indigo-600'>
+            <SVGCategory />
+            {blog_pack.cats.map((cat) => {
+              return (
+                <div className='ml-1' key={cat.id}>
+                  <Link href={`/category/${cat.slug}`}>
+                    <a aria-label='Category'>{cat.name}</a>
+                  </Link>
+                </div>
+              )
+            })}
+          </span>
+        </div>
+      </div>
+      <hr />
+    </div>
+  )
+}

components/BlogTemplates/HorizontalSmall.js

@@ -0,0 +1,41 @@
+import ImageComponentity from '../ImageComponentity'
+import Link from 'next/link'
+
+export default function HorizontalSmall({ blog_pack, section }) {
+  return (
+    <div key={blog_pack.blog.id} className='flex flex-col justify-between border-b pb-5'>
+      <Link href={`/blog/${blog_pack.blog.slug}`}>
+        <a aria-label='heading'>
+          <h1
+            aria-label='heading'
+            className='line-clamp-3 h-12 text-gray-900 font-medium hover:text-indigo-600'
+          >
+            {blog_pack.blog.title.rendered}
+          </h1>
+        </a>
+      </Link>
+      <div className='flex items-between justify-between mt-3'>
+        <div className='text-sm w-2/3 flex flex-col justify-between'>
+          <p
+            className='text-gray-700 line-clamp-2 h-10'
+            dangerouslySetInnerHTML={{ __html: blog_pack.blog.excerpt.rendered }}
+          />
+          <span className='text-gray-600 text-xs'>- {blog_pack.blog.date}</span>
+        </div>
+        <Link href={`/blog/${blog_pack.blog.slug}`}>
+          <a aria-label='image' className='inline-block ml-2'>
+            {blog_pack.blog.featured_media != 0 && blog_pack.blog.featured_media ? (
+              <ImageComponentity
+                src={blog_pack.blog._embedded['wp:featuredmedia'][0].source_url}
+                classes={section.imageClasses}
+                alt={blog_pack.blog.title.rendered}
+              />
+            ) : (
+              <div className={`${section.heightClass} w-full bg-gray-100`}></div>
+            )}
+          </a>
+        </Link>
+      </div>
+    </div>
+  )
+}

components/BlogTemplates/HorizontalVariant.js

@@ -0,0 +1,97 @@
+import ImageComponentity from '../ImageComponentity'
+import Link from 'next/link'
+import ReactHtmlParser from 'react-html-parser'
+
+export default function HorizontalVariant({ blog_pack, section, index }) {
+  const First = () => {
+    return (
+      <div key={blog_pack.blog.id} className='sm:col-span-6 lg:col-span-5'>
+        <a aria-label='blog link'>
+          <div
+            className='h-56 bg-cover text-center overflow-hidden bg-gray-100'
+            title='Woman holding a mug'
+          ></div>
+        </a>
+        <div className='mt-3 bg-white rounded-b lg:rounded-b-none lg:rounded-r flex flex-col justify-between leading-normal'>
+          <div className='lg:pl-16'>
+            <a
+              aria-label='blog link'
+              className='text-xs text-indigo-600 uppercase font-medium mb-3 flex items-center hover:text-gray-900 transition duration-500 ease-in-out'
+            >
+              Fashion
+            </a>
+            <a
+              aria-label='blog link'
+              className='text-gray-900 font-bold text-lg mb-2 hover:text-indigo-600 transition duration-500 ease-in-out'
+            >
+              The perfect summer sweater that you can wear!{' '}
+            </a>
+            <p className='text-gray-700 text-xs mt-2'>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla!
+              Maiores et perferendis eaque, exercitationem praesentium nihil.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  const Last = () => {
+    return (
+      <div className='sm:col-span-12 lg:col-span-3'>
+        <a aria-label='blog link'>
+          <div
+            className='h-56 bg-cover text-center overflow-hidden bg-gray-100'
+            title='Woman holding a mug'
+          ></div>
+        </a>
+        <div className='mt-3 bg-white rounded-b lg:rounded-b-none lg:rounded-r flex flex-col justify-between leading-normal'>
+          <div className=''>
+            <a
+              aria-label='blog link'
+              className='text-xs text-indigo-600 uppercase font-medium flex items-center hover:text-gray-900 transition duration-500 ease-in-out'
+            >
+              Fashion
+            </a>
+            <a
+              aria-label='blog link'
+              className='text-gray-900 font-bold text-lg mb-2 hover:text-indigo-600 transition duration-500 ease-in-out'
+            >
+              The perfect summer sweater that you can wear!{' '}
+            </a>
+            <p className='text-gray-700 text-xs mt-2'>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  const Default = () => {
+    return (
+      <div className='flex items-start mb-3 pb-3'>
+        <a aria-label='blog link' className='inline-block mr-3'>
+          <div className='w-20 h-20 bg-cover bg-center bg-gray-100'></div>
+        </a>
+        <div className='text-sm'>
+          <p className='text-gray-600 text-xs'>Aug 18</p>
+          <a
+            aria-label='blog link'
+            className='text-gray-900 font-medium hover:text-indigo-600 leading-none'
+          >
+            Cristiano Ronaldo of Juventus FC looks dejected during the...
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {index == 0 && <First />}
+      {index == 1 && ReactHtmlParser(`<div class='sm:col-span-6 lg:col-span-4'>`)}
+      {index >= 1 && index < 6 && <Default />}
+      {index == 5 && ReactHtmlParser(`</div>`)}
+      {index == 5 && <Last />}
+    </>
+  )
+}

components/BlogTemplates/SingleCol.js

@@ -0,0 +1,74 @@
+import ImageComponentity from '../ImageComponentity'
+import SVGCategory from '../SVG/SVGCategory'
+import SVGAuthor from '../SVG/SVGAuthor'
+import SVGClock from '../SVG/SVGClock'
+import Link from 'next/link'
+
+export default function SingleCol({ blog_pack }) {
+  return (
+    <div className='mb-10 rounded overflow-hidden flex flex-col mx-auto'>
+      <Link href={`/blog/${blog_pack.blog.slug}`}>
+        <a
+          aria-label='Blog post'
+          className='dark:text-gray-50 dark:hover:text-indigo-600 hover:text-indigo-600 transition duration-500 ease-in-out inline-block mb-2'
+        >
+          <h1 className='text-xl sm:text-4xl font-semibold'>{blog_pack.blog.title.rendered}</h1>
+        </a>
+      </Link>
+      <div className='relative'>
+        <Link href={`/blog/${blog_pack.blog.slug}`}>
+          <a aria-label='Blog post'>
+            {blog_pack.blog.featured_media != 0 && blog_pack.blog.featured_media ? (
+              <ImageComponentity
+                src={blog_pack.blog._embedded['wp:featuredmedia'][0].source_url}
+                alt={blog_pack.blog.title.rendered}
+              />
+            ) : (
+              <div className='h-400 w-full bg-gray-100'></div>
+            )}
+          </a>
+        </Link>
+        <Link href={`/author/${encodeURIComponent(blog_pack.blog._embedded.author[0].slug)}`}>
+          <a
+            aria-label='Author'
+            className='group absolute z-10 text-xs bottom-0 left-0 bg-indigo-600 px-6 m-2 py-2 text-white hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out sm:flex flex-row gap-1 items-center'
+          >
+            <SVGAuthor />
+            <span>{blog_pack.blog._embedded.author[0].name}</span>
+          </a>
+        </Link>
+        <Link href={`/blog/${blog_pack.blog.slug}`}>
+          <a
+            aria-label='Blog post'
+            className='hidden absolute z-10 text-xs absolute bottom-0 right-0 bg-indigo-600 px-6 m-2 py-2 text-white hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out sm:flex items-center'
+          >
+            <span className='text-lg'>|</span>&nbsp;&nbsp;<span>Read more</span>
+          </a>
+        </Link>
+      </div>
+      <div
+        className='text-gray-700 py-5 text-base leading-8 dark:text-gray-300'
+        dangerouslySetInnerHTML={{ __html: blog_pack.blog.excerpt.rendered }}
+      />
+      <div className='py-5 text-sm font-regular text-gray-900 dark:text-gray-300 flex'>
+        <span className='mr-3 flex flex-row gap-1 items-center'>
+          <SVGClock />
+          <span className='ml-1'>{blog_pack.blog.date}</span>
+        </span>
+        <span className='flex flex-row gap-1 items-center hover:text-indigo-600 dark:hover:text-indigo-600'>
+          <SVGCategory />
+          {blog_pack.cats.map((cat) => {
+            return (
+              <div className='ml-1' key={cat.id}>
+                <Link href={`/category/${cat.slug}`}>
+                  <a aria-label='Category'>{cat.name}</a>
+                </Link>
+              </div>
+            )
+          })}
+        </span>
+      </div>
+      <hr />
+    </div>
+  )
+}

components/Header.js

@@ -0,0 +1,123 @@
+import { withRouter } from 'next/router'
+import Link from 'next/link'
+import React, { useState } from 'react'
+import SVGCross from './SVG/SVGCross'
+import SVGBurgernav from './SVG/SVGBurgernav'
+import SwitchTheme from './SwitchTheme'
+import SearchForm from './SearchForm'
+
+function Header({ router }) {
+  const navs = [
+    { text: 'Home', href: '/' },
+    { text: 'Mcgivney Festival', href: '/mcgivneyfestival' },
+    { text: 'Catholic App', href: '/catholic-app' }
+  ]
+
+  const [display, setDisplay] = useState(false)
+
+  return (
+    <>
+      <header className='flex flex-row items-center justify-between mb-4 relative'>
+        <Link href={'/'}>
+          <a>
+            <div className='site hover:text-indigo-600'>
+              <h1 aria-label='site-name' className='font-semibold'>
+                Componentity
+              </h1>
+              <p aria-label='site-description' className='text-xs'>
+                Just Copy & Paste
+              </p>
+            </div>
+          </a>
+        </Link>
+        <div
+          className={`z-10 ${display ? 'fixed' : 'hidden'} inset-0 overflow-hidden`}
+          aria-labelledby='slide-over-title'
+          role='dialog'
+          aria-modal='true'
+        >
+          <div className='absolute inset-0 overflow-hidden'>
+            <div
+              className='absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity'
+              aria-hidden='true'
+            ></div>
+
+            <div className='fixed inset-y-0 left-0 pr-20 max-w-full flex'>
+              <div className='relative w-screen max-w-md'>
+                <div className='h-full flex flex-col py-6 bg-white dark:bg-gray-700 shadow-xl overflow-y-scroll'>
+                  <div className='px-4 sm:px-6'>
+                    <h2
+                      className='pl-4 text-lg font-medium text-gray-900 dark:text-white'
+                      id='slide-over-title'
+                    >
+                      Panel title
+                    </h2>
+                  </div>
+                  <div className='mt-6 relative flex-1 px-4 sm:px-6'>
+                    <div className='absolute inset-0 px-4 sm:px-6'>
+                      <ul className='grid gap-3'>
+                        {navs.map((nav, index) => {
+                          return (
+                            <li key={index}>
+                              <Link href={nav.href}>
+                                <a
+                                  className={`block py-2 px-5 rounded-md text-sm font-light hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:text-gray-300 ${
+                                    router.pathname == nav.href
+                                      ? 'bg-indigo-600 text-gray-50 hover:text-gray-700'
+                                      : 'text-gray-700'
+                                  }`}
+                                  aria-label='nav link'
+                                >
+                                  {nav.text}
+                                </a>
+                              </Link>
+                            </li>
+                          )
+                        })}
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className='flex flex-row gap-1 items-center justify-center'>
+          <ul className='hidden sm:flex flex-row gap-1'>
+            {navs.map((nav, index) => {
+              return (
+                <li key={index}>
+                  <Link href={nav.href}>
+                    <a
+                      className={`py-2 px-5 rounded-md text-sm font-light hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:text-gray-100 dark:hover:text-gray-900 ${
+                        router.pathname == nav.href
+                          ? 'bg-indigo-600 text-gray-50 hover:text-gray-700'
+                          : 'text-gray-700'
+                      }`}
+                      aria-label='nav link'
+                    >
+                      {nav.text}
+                    </a>
+                  </Link>
+                </li>
+              )
+            })}
+          </ul>
+          <span className='flex items-center justify-center gap-1'>
+            <SwitchTheme />
+            <SearchForm />
+            <button
+              aria-label='navbar-mobile'
+              onClick={() => setDisplay(!display)}
+              className='sm:hidden z-10 whitespace-no-wrap fixed bottom-4 right-4 w-12 h-12 flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150'
+            >
+              {display ? <SVGCross /> : <SVGBurgernav />}
+            </button>
+          </span>
+        </div>
+      </header>
+    </>
+  )
+}
+export default withRouter(Header)