update to cmd K navbar and the courses page

Author: andre347

components/CommandBar.tsx

@@ -98,9 +98,8 @@ const ResultItem = React.forwardRef(
         style={{
           padding: "8px 16px",
           background: active ? "var(--a1)" : "transparent",
-          borderLeft: `2px solid ${
-            active ? "var(--sideBorder)" : "transparent"
-          }`,
+          borderLeft: `2px solid ${active ? "var(--sideBorder)" : "transparent"
+            }`,
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
@@ -172,6 +171,12 @@ const ResultItem = React.forwardRef(
   }
 );
 
+const positionerStyle = {
+  zIndex: 100,
+  background: "rgba(0, 0, 0, 0.2)",
+  backdropFilter: "blur(2px)",
+};
+
 export default function CommandBar(props) {
   const router = useRouter();
 
@@ -261,6 +266,15 @@ export default function CommandBar(props) {
       section: "Contact",
       perform: () => window.open("https://dev.to/andre347", "_blank"),
     },
+    {
+      id: "blueskyAction",
+      name: "Bluesky",
+      shortcut: ["bl"],
+      keywords: "social contact dm bluesky",
+      section: "Contact",
+      perform: () =>
+        window.open("https://bsky.app/profile/andredevries.dev", "_blank"),
+    },
     {
       id: "copy",
       name: "Copy URL",
@@ -304,7 +318,7 @@ export default function CommandBar(props) {
       actions={actions}
     >
       <KBarPortal>
-        <KBarPositioner>
+        <KBarPositioner style={positionerStyle}>
           <KBarAnimator style={animatorStyle}>
             <KBarSearch style={searchStyle} />
             <RenderResults />

components/Header.tsx

@@ -9,11 +9,10 @@ function Header() {
   const scrolled = useScroll(50);
   return (
     <nav
-      className={`fixed top-0 z-30 left-0 right-0 max-w-3xl px-4 sm:px-6 xl:max-w-4xl xl:px-0 mx-auto transition-all ${
-        scrolled
+      className={`fixed top-0 z-30 left-0 right-0 max-w-3xl px-4 sm:px-6 xl:max-w-4xl xl:px-0 mx-auto transition-all ${scrolled
           ? "border-b border-gray-50 bg-white/50 backdrop-blur-xl"
           : "bg-white/0"
-      } `}
+        } `}
     >
       <header className="flex justify-between items-center py-10">
         <div onClick={() => setIsOpen(false)}>
@@ -29,10 +28,10 @@ function Header() {
           </Link>
         </div>
         {/* Header for non-mobile screens */}
-        <div className="text-base leading-5 hidden sm:block">
+        <div className="text-base leading-5 hidden md:block">
           <NavTabs />
         </div>
-        <div className="block sm:hidden">
+        <div className="block md:hidden">
           <button
             className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-orange-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
             aria-expanded="false"
@@ -79,7 +78,7 @@ function Header() {
 
 function MobileHeader({ isOpen, setIsOpen }) {
   return (
-    <div className={`${isOpen ? "block" : "hidden"} sm:hidden`}>
+    <div className={`${isOpen ? "block" : "hidden"} md:hidden`}>
       <div className="px-2 pt-2 pb-3 space-y-1">
         {/* <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" --> */}
         <MobileNavLink href="/posts">

components/NavTabs.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import NavLink from "@/lib/NavLink";
 import { useRouter } from "next/router";
+import { useKBar } from "kbar";
 
 import posthog from "posthog-js";
 
@@ -29,14 +30,15 @@ const defaultRoutes = [routes.home, routes.about];
 
 function NavTabs() {
   const router = useRouter();
+  const { query } = useKBar();
   const currPathName = router.pathname;
   const routesAsArr = Object.keys(routes).map((r) => routes[r]);
 
   return (
     // <div className="py-4 mt-2">
-    <div className="hidden sm:block">
+    <div className="hidden md:block">
       <div className="">
-        <nav className="flex" aria-label="Tabs">
+        <nav className="flex items-center" aria-label="Tabs">
           {navItems.map((item, idx) => {
             return (
               <NavLink href={item.url} key={item.url}>
@@ -53,6 +55,32 @@ function NavTabs() {
               </NavLink>
             );
           })}
+          <button
+            aria-label="Search"
+            type="button"
+            onClick={query.toggle}
+            className="ml-4 p-1 text-gray-500 hover:text-gray-900 border border-gray-200 rounded-md text-xs font-medium px-2"
+          >
+            <span className="sr-only">Cmd+K</span>
+            <span className="flex items-center">
+              <svg
+                className="w-3 h-3 mr-1"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
+                ></path>
+              </svg>
+              K
+            </span>
+
+          </button>
         </nav>
         {/* <div className="hidden max-w-screen-md grid-cols-4 gap-1 mx-auto md:grid">
           {defaultRoutes.map((route) => {

pages/courses/index.tsx

@@ -18,7 +18,7 @@ function Courses() {
         <p className="text-lg leading-7 text-gray-500">{courses.subTitle}</p>
       </div>
 
-      <div className="mt-4 grid gap-12 border-t-2 border-gray-100 pt-10 lg:grid-cols-1 lg:col-gap-5 lg:row-gap-12">
+      <div className="mt-4 grid gap-16 border-t-2 border-gray-100 pt-10 lg:grid-cols-2 lg:col-gap-5 lg:row-gap-12">
         {courses.list.map((course, idx) => {
           // calculate  duration
           const duration = course.videos.reduce((prev, current) => {
@@ -29,7 +29,7 @@ function Courses() {
           return (
             <div key={idx}>
               <Link href={"/courses/[slug]"} as={`/courses/${course.slug}`}>
-                <div className="border border-gray-200 rounded-lg p-4 max-w-72 w-full cursor-pointer hover:border-gray-300 ease-in-out duration-150 bg-white/50">
+                <div className="border border-gray-200 rounded-lg p-4 w-full cursor-pointer hover:border-gray-300 ease-in-out duration-150 bg-white/50">
                   <p className="text-sm leading-5 text-gray-500">
                     {course.videos.length + ` videos`} &bull;{" "}
                     <span>{msToTime(duration)}</span>