Redesign ✨ (leerob#375)

styfle · Oct 4, 2021 · a6806d3 · a6806d3
1 parent ea39018
commit a6806d3
Show file tree

Hide file tree

Showing 32 changed files with 899 additions and 457 deletions.
diff --git a/components/BlogPostCard.tsx b/components/BlogPostCard.tsx
@@ -0,0 +1,56 @@
+import Link from 'next/link';
+import useSWR from 'swr';
+import cn from 'classnames';
+
+import fetcher from 'lib/fetcher';
+import { Views } from 'lib/types';
+
+export default function BlogPostCard({ title, slug, gradient }) {
+  const { data } = useSWR<Views>(`/api/views/${slug}`, fetcher);
+  const views = data?.total;
+
+  return (
+    <Link href={`/blog/${slug}`}>
+      <a
+        className={cn(
+          'transform hover:scale-[1.01] transition-all',
+          'rounded-xl w-full md:w-1/3 bg-gradient-to-r p-1',
+          gradient
+        )}
+      >
+        <div className="flex flex-col justify-between h-full bg-white dark:bg-gray-900 rounded-lg p-4">
+          <div className="flex flex-col md:flex-row justify-between">
+            <h4 className="text-lg md:text-lg font-medium mb-6 sm:mb-10 w-full text-gray-900 dark:text-gray-100 tracking-tight">
+              {title}
+            </h4>
+          </div>
+          <div className="flex items-center text-gray-800 dark:text-gray-200">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+              />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+              />
+            </svg>
+            <span className="ml-2 align-baseline">
+              {views ? new Number(views).toLocaleString() : '–––'}
+            </span>
+          </div>
+        </div>
+      </a>
+    </Link>
+  );
+}
diff --git a/components/ConsCard.tsx b/components/ConsCard.tsx
@@ -1,6 +1,6 @@
 export default function ConsCard({ title, cons }) {
   return (
-    <div className="border border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-900 rounded p-6 my-6 w-full">
+    <div className="border border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-900 rounded-xl p-6 my-6 w-full">
       <span>{`You might not use ${title} if...`}</span>
       <div className="mt-4">
         {cons.map((con) => (

diff --git a/components/Container.tsx b/components/Container.tsx
@@ -3,8 +3,30 @@ import { useRouter } from 'next/router';
 import { useState, useEffect } from 'react';
 import { useTheme } from 'next-themes';
 import NextLink from 'next/link';
+import cn from 'classnames';
 
 import Footer from 'components/Footer';
+import MobileMenu from 'components/MobileMenu';
+
+function NavItem({ href, text }) {
+  const router = useRouter();
+  const isActive = router.asPath === href;
+
+  return (
+    <NextLink href={href}>
+      <a
+        className={cn(
+          isActive
+            ? 'font-semibold text-gray-800 dark:text-gray-200'
+            : 'font-normal text-gray-600 dark:text-gray-400',
+          'hidden md:inline-flex p-1 sm:px-3 sm:py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-all'
+        )}
+      >
+        {text}
+      </a>
+    </NextLink>
+  );
+}
 
 export default function Container(props) {
   const [mounted, setMounted] = useState(false);
@@ -24,7 +46,7 @@ export default function Container(props) {
   };
 
   return (
-    <div className="bg-white dark:bg-black">
+    <div className="bg-gray-50 dark:bg-gray-900">
       <Head>
         <title>{meta.title}</title>
         <meta name="robots" content="follow, index" />
@@ -45,62 +67,58 @@ export default function Container(props) {
           <meta property="article:published_time" content={meta.date} />
         )}
       </Head>
-      <nav className="flex items-center justify-between w-full max-w-4xl p-8 mx-auto my-0 text-gray-900 bg-white sticky-nav md:my-8 dark:bg-black bg-opacity-60 dark:text-gray-100">
-        <a href="#skip" className="skip-nav">
-          Skip to content
-        </a>
-        <button
-          aria-label="Toggle Dark Mode"
-          type="button"
-          className="w-10 h-10 p-3 bg-gray-200 rounded dark:bg-gray-800"
-          onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
-        >
-          {mounted && (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              stroke="currentColor"
-              className="w-4 h-4 text-gray-800 dark:text-gray-200"
-            >
-              {resolvedTheme === 'dark' ? (
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
-                />
-              ) : (
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-                />
-              )}
-            </svg>
-          )}
-        </button>
-        <div>
-          <NextLink href="/dashboard">
-            <a className="p-1 text-gray-900 sm:p-4 dark:text-gray-100">
-              Dashboard
-            </a>
-          </NextLink>
-          <NextLink href="/blog">
-            <a className="p-1 text-gray-900 sm:p-4 dark:text-gray-100">Blog</a>
-          </NextLink>
-          <NextLink href="/about">
-            <a className="p-1 text-gray-900 sm:p-4 dark:text-gray-100">About</a>
-          </NextLink>
-          <NextLink href="/">
-            <a className="p-1 text-gray-900 sm:p-4 dark:text-gray-100">Home</a>
-          </NextLink>
-        </div>
-      </nav>
+      <div className="flex flex-col justify-center px-8">
+        <nav className="flex items-center justify-between w-full relative max-w-2xl border-gray-200 dark:border-gray-700 mx-auto pt-8 pb-8 sm:pb-16  text-gray-900 bg-gray-50  dark:bg-gray-900 bg-opacity-60 dark:text-gray-100">
+          <a href="#skip" className="skip-nav">
+            Skip to content
+          </a>
+          <div className="ml-[-0.60rem]">
+            <MobileMenu />
+            <NavItem href="/" text="Home" />
+            <NavItem href="/guestbook" text="Guestbook" />
+            <NavItem href="/dashboard" text="Dashboard" />
+            <NavItem href="/blog" text="Blog" />
+            <NavItem href="/snippets" text="Snippets" />
+          </div>
+          <button
+            aria-label="Toggle Dark Mode"
+            type="button"
+            className="w-9 h-9 bg-gray-200 rounded-lg dark:bg-gray-600 flex items-center justify-center  hover:ring-2 ring-gray-300  transition-all"
+            onClick={() =>
+              setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+            }
+          >
+            {mounted && (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                className="w-5 h-5 text-gray-800 dark:text-gray-200"
+              >
+                {resolvedTheme === 'dark' ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+                  />
+                ) : (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+                  />
+                )}
+              </svg>
+            )}
+          </button>
+        </nav>
+      </div>
       <main
         id="skip"
-        className="flex flex-col justify-center px-8 bg-white dark:bg-black"
+        className="flex flex-col justify-center px-8 bg-gray-50 dark:bg-gray-900"
       >
         {children}
         <Footer />

diff --git a/components/FunctionCard.tsx b/components/FunctionCard.tsx
@@ -11,7 +11,7 @@ export default function FunctionCard({
   return (
     <Link href={`/snippets/${slug}`}>
       <a
-        className="border border-grey-200 dark:border-gray-900 rounded p-4 w-full"
+        className="border border-grey-200 dark:border-gray-800 rounded p-4 w-full bg-white dark:bg-gray-900"
         {...rest}
       >
         <Image

diff --git a/components/Guestbook.tsx b/components/Guestbook.tsx
@@ -118,7 +118,7 @@ export default function Guestbook({ fallbackData }) {
               className="pl-4 pr-32 py-2 mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full border-gray-300 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
             />
             <button
-              className="flex items-center justify-center absolute right-1 top-1 px-4 font-bold h-8 bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded w-28"
+              className="flex items-center justify-center absolute right-1 top-1 px-4 pt-1 font-medium h-8 bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded w-28"
               type="submit"
             >
               {form.state === Form.Loading ? <LoadingSpinner /> : 'Sign'}

diff --git a/components/MDXComponents.tsx b/components/MDXComponents.tsx
@@ -25,8 +25,12 @@ const CustomLink = (props) => {
   return <a target="_blank" rel="noopener noreferrer" {...props} />;
 };
 
+function RoundedImage(props) {
+  return <Image alt={props.alt} className="rounded-lg" {...props} />;
+}
+
 const MDXComponents = {
-  Image,
+  Image: RoundedImage,
   ImageWithTheme,
   a: CustomLink,
   Analytics,