diff --git a/components/grid-view.tsx b/components/grid-view.tsx new file mode 100644 index 000000000..30669dc39 --- /dev/null +++ b/components/grid-view.tsx @@ -0,0 +1,39 @@ +import React, { useState } from "react"; +import styles from "./grid.module.css"; +import { useRouter } from "next/router"; + +export const GridView = ({ + content, +}: { + content: { + title: string; + description: string; + path: string; + }; +}) => { + const router = useRouter(); + const [hover, setHover] = useState(false); + + return ( +
{ + router.push(content.path); + }} + onMouseOver={() => { + setHover(true); + }} + onMouseLeave={() => { + setHover(false); + }} + id={content.title.toLowerCase().split(" ").join("-")} + > +

+ {content.title} +

+

+ {content.description} +

+
+ ); +}; diff --git a/components/grid.module.css b/components/grid.module.css new file mode 100644 index 000000000..bf1f3b01d --- /dev/null +++ b/components/grid.module.css @@ -0,0 +1,24 @@ +.gridBox { + padding: 16px; + border-radius: 8px; + border: 1px solid #b9c5d4; + backdrop-filter: blur(35px); + flex-direction: column; + align-items: flex-start; + width: 209px; + cursor: pointer; + color: #000d3d; +} + +.hoverGridBox { + padding: 16px; + border-radius: 8px; + border: 1px solid #b9c5d4; + backdrop-filter: blur(35px); + flex-direction: column; + align-items: flex-start; + background: #efebff; + width: 209px; + cursor: pointer; + color: #5f38fb; +} diff --git a/src/icons/shared-icons.tsx b/src/icons/shared-icons.tsx index df9fb3467..793c6c3c3 100644 --- a/src/icons/shared-icons.tsx +++ b/src/icons/shared-icons.tsx @@ -353,3 +353,72 @@ export const Gear = ({ onClickHandler }: { onClickHandler?: () => void }) => { ); }; + +export const SearchIcon = () => { + return ( + + + + ); +}; + +export const LeftIcon = () => { + return ( + + + + ); +}; + +export const GridViewIcon = ({ viewType }: { viewType: string }) => { + return ( + + + + ); +}; + +export const ListViewIcon = ({ viewType }: { viewType: string }) => { + return ( + + + + ); +}; diff --git a/styles/globals.css b/styles/globals.css index 6c6f680ab..52e1dd01f 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -4472,27 +4472,27 @@ div:hover > .\[div\:hover\>\&\]\:nx-opacity-100 { } .list-view { - border: 1px solid #ddd; + border: 1px solid #dce2ea; border-radius: 8px; - padding: 12px; + padding: 16px 48px 16px 16px; margin-bottom: 10px; transition: border-color 0.3s ease-in-out, transform 0.3s ease-in-out; } +.list-view-title:hover { + color: #5f38fb; +} +.list-view-title { + color: #000d3d; + font-size: 16px; + font-weight: 500; + text-transform: capitalize; +} .list-view:hover { - /* padding: 24px; */ - border-radius: 16px; - background-color: rgba(126, 190, 206, 0.2); - background: linear-gradient( - 134deg, - rgba(133, 102, 255, 0.2) 16.16%, - rgba(95, 56, 251, 0.3) 55.86%, - rgba(95, 56, 251, 0.4) 78.77% - ); - box-shadow: 10px 10px 30px 0px rgba(95, 56, 251, 0.3); - backdrop-filter: blur(10px); + background-color: #efebff; + backdrop-filter: blur(35px); cursor: pointer; } @@ -5038,3 +5038,38 @@ div:hover > .\[div\:hover\>\&\]\:nx-opacity-100 { background: #fff; box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.1); } + +.tags { + border: 1px solid #dce2ea; + background-color: #fff; +} + +.tags:hover { + border-color: #efebff; + background-color: #efebff; + color: #5f38fb; +} + +.toggle-view { + border-radius: 8px; + border: 1px solid #b9c5d4; + background: #fff; + padding: 3px; +} + +.toggle-list-grid-bg { + background: #efebff; + border-radius: 6px; +} + +.tags-input { + display: flex; + width: 280px; + height: 44px; + padding: 12px; + justify-content: space-between; + align-items: center; + border: 1px solid #d0d9e3; + border-radius: 8px; + margin-top: 35px; +} diff --git a/theme/fetch-ai-docs/components/matching-tag-routes.tsx b/theme/fetch-ai-docs/components/matching-tag-routes.tsx index 4dd2e1a28..f4ee0556a 100644 --- a/theme/fetch-ai-docs/components/matching-tag-routes.tsx +++ b/theme/fetch-ai-docs/components/matching-tag-routes.tsx @@ -1,10 +1,15 @@ /* eslint-disable unicorn/consistent-function-scoping */ -import { GuideBox } from "components/feature-guide-tabs"; -import { Button } from "nextra/components"; import React, { ReactElement, useEffect, useState } from "react"; -import { FaBars, FaThLarge, FaAngleUp, FaAngleDown } from "react-icons/fa"; import { useRouter } from "next/router"; import fetchJson from "src/lib/fetch-json"; +import { GridView } from "components/grid-view"; +import { Input } from "./input"; +import { + GridViewIcon, + LeftIcon, + ListViewIcon, + SearchIcon, +} from "src/icons/shared-icons"; interface RouteInfo { route: string; @@ -13,21 +18,29 @@ interface RouteInfo { interface RoutesComponentProps { routes: RouteInfo[]; + setMatchingTagRoute: React.Dispatch>; } export function MatchingRoutesComponent({ routes, + setMatchingTagRoute, }: RoutesComponentProps): ReactElement { const [viewType, setViewType] = useState<"list" | "grid">("list"); const [content, setContent] = useState([]); - const [isListViewCollapsed, setListViewCollapsed] = useState(false); + const [searchQuery, setSearchQuery] = useState(""); + const [matchedRoutes, setMatchedRoutes] = useState(routes); const router = useRouter(); const toggleView = (type) => { setViewType(type); }; - const toggleListView = () => { - setListViewCollapsed((prevCollapsed) => !prevCollapsed); + const handleSearch = (event) => { + setSearchQuery(event.target.value.toLowerCase()); + const filteredRoutes = routes.filter((routeInfo) => { + const guideInfo = findGuideByPath(content, routeInfo.route); + return guideInfo.title.toLowerCase().includes(searchQuery); + }); + setMatchedRoutes(filteredRoutes); }; const fetchGuide = async () => { @@ -90,116 +103,121 @@ export function MatchingRoutesComponent({ return { title, description }; }; + const routeTitle = () => { + const pathname = window.location.pathname; + return ( + pathname.split("/").pop().split("-").join(" ").charAt(0).toUpperCase() + + pathname.split("/").pop().split("-").join(" ").slice(1) + ); + }; + return (
+
-

Topics with matching tag:

- - +
+

+ {matchedRoutes?.length} topics matching with the tag +

+
- {isListViewCollapsed ? ( - - ) : ( - - )} +
+ + +
+
+
+ +
+ +
- {viewType === "list" - ? !isListViewCollapsed && ( -
    - {routes.map((routeInfo, index) => { - const guideInfo = findGuideByPath(content, routeInfo.route); - return ( -
  • { - router.push(routeInfo.route); - }} - > -

    - {guideInfo.title} -

    -

    - {guideInfo.description} -

    -
    • - ); - })} -
- ) - : !isListViewCollapsed && ( -
-
- {routes.map((routeInfo, index) => { - const guideInfo = findGuideByPath(content, routeInfo.route); - return ( - - ); - })} -
-
- )} + {viewType === "list" ? ( +
    + {matchedRoutes.map((routeInfo, index) => { + const guideInfo = findGuideByPath(content, routeInfo.route); + return ( +
  • { + router.push(routeInfo.route); + }} + > +

    {guideInfo.title}

    +

    + {guideInfo.description} +

    +
    • + ); + })} +
+ ) : ( +
+
+ {matchedRoutes.map((routeInfo, index) => { + const guideInfo = findGuideByPath(content, routeInfo.route); + return ( + + ); + })} +
+
+ )}
); } diff --git a/theme/fetch-ai-docs/index.tsx b/theme/fetch-ai-docs/index.tsx index 188940bd3..3901050a7 100644 --- a/theme/fetch-ai-docs/index.tsx +++ b/theme/fetch-ai-docs/index.tsx @@ -92,22 +92,13 @@ const Body = ({ setMatchingTagRoute(filteredRoutes); }; - const tagColors = [ - "bg-indigo", - "bg-orange", - "bg-light-green", - "bg-blue-150", - "bg-yellow-150", - "bg-red-150", - ]; - const tagsComponent = tags && ( + const tagsComponent = tags && !matchingTagRoute && (
{tags.map((tag, index) => ( @@ -129,7 +120,10 @@ const Body = ({ <> {tagsComponent} {matchingTagRoute ? ( - + ) : ( "" )} @@ -171,7 +165,7 @@ const Body = ({ )} >
- {breadcrumb} + {!matchingTagRoute && breadcrumb} {body}