Merge pull request #52 from agicommies/feature/docs-searchbar

feature: search bar
fix: card style

apps/commune-page/src/app/components/doc-sidebar.tsx

@@ -6,6 +6,7 @@ import {
   Bars3Icon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  XMarkIcon,
 } from "@heroicons/react/20/solid";
 
 import { tutorials } from "../docs/[...slug]/tutorials";
@@ -21,11 +22,36 @@ export function DocSidebar(props: DocSidebarProps): JSX.Element {
   const { params, activeTutorial, activeContent, prefix } = props;
 
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [menuContent, setMenuContent] = useState(tutorials);
+  const [searchValue, setSearchValue] = useState('');
 
   function toggleMobileMenu(): void {
     setMobileMenuOpen(!mobileMenuOpen);
   }
 
+  const handleSearchOnMenu = (searchValue: string) => {
+    if (searchValue.trim().length == 0) return setMenuContent(tutorials)
+
+    const filteredMenuContent = tutorials.map(tutorial => {
+      return {
+        title: tutorial.title,
+        tutorialId: tutorial.tutorialId,
+        contents: tutorial.contents.filter(contents => contents.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      }
+    }).filter(tutorial => tutorial.contents.length > 0)
+    setMenuContent(filteredMenuContent)
+  }
+
+  const handleSearchInput = (search: string) => {
+    setSearchValue(search)
+    handleSearchOnMenu(search)
+  }
+
+  const handleClearSearch = () => {
+    setSearchValue('')
+    setMenuContent(tutorials)
+  }
+
   const commonButtonClass =
     "flex h-12 w-12 items-center justify-center rounded-2xl bg-gray-100/10 p-1.5 hover:bg-gray-100/[0.15]";
 
@@ -35,8 +61,8 @@ export function DocSidebar(props: DocSidebarProps): JSX.Element {
         aria-hidden="true"
         aria-label="Global"
         className={`animate-menu-fade fixed z-10 h-[calc(100svh-69px)] lg:h-[calc(100svh-123px)] w-full backdrop-blur-sm lg:w-[17rem] lg:backdrop-blur-none ${mobileMenuOpen ? "visible" : "hidden"} lg:block`}
-        onClick={toggleMobileMenu}
       >
+        <div id="background-blurred" className="fixed w-full h-full transparent backdrop-blur-sm md:hidden" onClick={toggleMobileMenu} />
         <div
           className={`sm:min-w-2/6 relative h-full w-4/6 overflow-y-scroll border-r border-gray-900/[0.06] bg-[url('/bg-pattern.svg')] p-8 sm:w-3/6 md:w-2/6 lg:mx-auto lg:w-full`}
         >
@@ -48,10 +74,15 @@ export function DocSidebar(props: DocSidebarProps): JSX.Element {
             <span className="sr-only">Close menu</span>
             <ChevronLeftIcon
               aria-hidden="true"
-              className="h-6 w-6 fill-white"
+              className="w-6 h-6 fill-white"
             />
           </button>
-          {tutorials.map((tutorial) => {
+
+          <div className="flex items-center mt-8 mb-4 bg-black border h-fit lg:mt-0 border-white/20">
+            <input className="w-auto px-2 py-1 text-gray-200 bg-black focus:outline-none" value={searchValue} onChange={(e) => { handleSearchInput(e.target.value) }} placeholder="Search" />
+            {searchValue.length > 0 && <XMarkIcon width={18} color="white" className="w-auto h-auto" onClick={handleClearSearch} />}
+          </div>
+          {menuContent.map((tutorial) => {
             return (
               <div key={tutorial.title}>
                 <span className="text-base font-medium text-white">
@@ -68,7 +99,7 @@ export function DocSidebar(props: DocSidebarProps): JSX.Element {
                       >
                         {params.slug[1] === content.href &&
                           params.slug[0].startsWith(tutorial.tutorialId) && (
-                            <div className="absolute -left-1 h-2 w-2 rounded-full bg-white" />
+                            <div className="absolute w-2 h-2 bg-white rounded-full -left-1" />
                           )}
                         <span>{content.name}</span>
                       </Link>

apps/commune-page/src/app/docs/[...slug]/components.tsx

@@ -4,21 +4,13 @@ interface CardProps {
   title: string;
   description: string;
   link: string;
-  type: string;
 }
 
-function Card({ title, description, link, type }: CardProps): JSX.Element {
-  const cardStyles: Record<string, string> = {
-    start:
-      "flex flex-col justify-between px-6 pb-6 border border-gray-500 rounded-xl shadow-custom-dark md:w-1/2",
-    basic:
-      "flex flex-col justify-between px-6 pb-6 border border-gray-500 rounded-xl shadow-custom-dark md:w-1/3",
-    subnet:
-      "flex flex-col justify-between px-6 pb-6 border border-gray-500 rounded-xl shadow-custom-dark md:w-1/2",
-  };
+function Card({ title, description, link }: CardProps): JSX.Element {
 
+  const cardStyle = "flex flex-col justify-between px-6 pb-6 border border-gray-500 rounded-xl shadow-custom-dark md:w-full"
   return (
-    <div className={cardStyles[type]}>
+    <div className={cardStyle}>
       <h3>{title}</h3>
       <p>{description}</p>
       <Link
@@ -34,7 +26,7 @@ function Card({ title, description, link, type }: CardProps): JSX.Element {
 function CardList({ data }: { data: CardProps[] }): JSX.Element {
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-4 md:flex-row">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 2xl:grid-cols-4 md:flex-row">
         {data.map((card) => (
           <Card key={card.title} {...card} />
         ))}
@@ -69,28 +61,24 @@ const startCardsData = [
     description:
       "Set up your commune and wallet to start participating in the network.",
     link: "/docs/installation/setup-commune",
-    type: "start",
   },
   {
     title: "Learn the Concepts",
     description:
       "Understand the basics of the network, weight system, governance, and more.",
     link: "/docs/concepts/basics",
-    type: "start",
   },
   {
     title: "Code Documentation",
     description:
       "Learn the structure of Commune AI source code, and how to contribute.",
     link: "https://docs.communex.ai/communex",
-    type: "start",
   },
   {
     title: "Watch Videos",
     description:
       "Watch tutorials and guides on how to operate within the Commune AI network.",
     link: "https://www.youtube.com/@project_eden_ai/videos",
-    type: "start",
   },
 ];
 
@@ -100,41 +88,35 @@ const basicsCardsData = [
     description:
       "How to mine, create a miner, deploy a miner, register a miner.",
     link: "/docs/mining/what-is-mining",
-    type: "basic",
   },
   {
     title: "Validating basics",
     description:
       "How to validate, create a validator, deploy a validator, register a validator.",
     link: "/docs/mining/what-is-validating",
-    type: "basic",
   },
   {
     title: "Subnets basics",
     description:
       "What are subnets, making a subnet, deploying a subnet, subnet parameters, types of subnets.",
     link: "/docs/subnets/what-is-a-subnet",
-    type: "basic",
   },
   {
     title: "Module basics",
     description:
       "What are modules, deploying, registering, and connecting to them.",
     link: "/docs/modules/what-is-a-module",
-    type: "basic",
   },
   {
     title: "Weights basics",
     description: "What are weights, how do they work, how to set weights.",
     link: "/docs/concepts/weight-system",
-    type: "basic",
   },
   {
     title: "Governance Basics",
     description:
       "Operate on testnet, run a local node, learn network parameters, learn consensus.",
     link: "/docs/subspace/commune-blockchain",
-    type: "basic",
   },
 ];
 
@@ -144,7 +126,6 @@ const subnetCardsData = [
     description:
       "Look at the Github Subnet template, to learn how to build a subnet.",
     link: "https://github.com/agicommies/commune-subnet-template",
-    type: "subnet",
   },
 ];
 
@@ -153,20 +134,17 @@ const subnetListCardsData = [
     title: "General Subnet",
     description: "The general subnet, designed for human validation.",
     link: "/docs/subnets/general-subnet-dao",
-    type: "subnet",
   },
   {
     title: "Mosaic Subnet",
     description: "Instantly visualize your ideas.",
     link: "https://mosaicx.org/",
-    type: "subnet",
   },
   {
     title: "Synthia",
     description:
       "Continuous stream of synthetic training data with verified quality at scale.",
     link: "https://github.com/agicommies/synthia",
-    type: "subnet",
   },
 ];
 
@@ -175,6 +153,5 @@ const subnetTemplateCardsData = [
     title: "See Subnet Template",
     description: "See an example of how to structure your subnet code.",
     link: "/docs/subnets/subnet-template",
-    type: "subnet",
   },
 ];