+
+ );
+}
```
## components/DirectoryExplorer.tsx
Status: modified; +42; −35
```diff
@@ -1,21 +1,31 @@
"use client";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import { Heart, SearchX } from "lucide-react";
import {
libraries,
type Category,
+ type Library,
type Stack,
type UseCase,
} from "@/data/libraries";
import { Button } from "@/components/ui/button";
-import { filterLibraries, nextSaved, readSaved } from "@/lib/directory";
import { FilterBar, FilterDropdown } from "./FilterBar";
import { LibraryCard } from "./LibraryCard";
const SAVED_LIBRARIES_KEY = "col:saved-libraries";
-const validSlugs = new Set(libraries.map(({ slug }) => slug));
+function matchesQuery(library: Library, tokens: string[]): boolean {
+ return tokens.every((token) => [
+ library.name,
+ library.description,
+ library.category,
+ ...library.stacks,
+ ...library.useCases,
+ ...(library.tags ?? []),
+ ].join(" ").toLowerCase().includes(token));
+}
+
export function DirectoryExplorer({ initialQuery = "" }: { initialQuery?: string }) {
const [query, setQuery] = useState(initialQuery);
const [category, setCategory] = useState
+ {CATEGORIES.map((category) => {
+ const matches = libraries.filter((library) => library.category === category);
+ const isActive = active === category;
+ const Icon = CATEGORY_ICONS[category];
+
+ return (
+
+
+
+ );
+ })}
+
+ Search and filter the complete Col library directory.
- {visibleResults.length} {visibleResults.length === 1 ? "library" : "libraries"}{visibleResults.length === 0 ? " found" : ""}
+ {visibleResults.length} libraries
;
onQueryChange: (query: string) => void;
onCategoryChange: (category: Category | null) => void;
onStackChange: (stack: Stack | null) => void;
@@ -56,7 +55,7 @@
onClearAll: () => void;
}
-export function FilterBar({ activeCategory, activeStacks, activeUseCases, query, searchRef, onQueryChange, onCategoryChange, onStackChange, onUseCaseChange, onClearAll }: FilterBarProps) {
+export function FilterBar({ activeCategory, activeStacks, activeUseCases, query, onQueryChange, onCategoryChange, onStackChange, onUseCaseChange, onClearAll }: FilterBarProps) {
const hasFilters = query.trim() !== "" || activeCategory !== null || activeStacks.length > 0 || activeUseCases.length > 0;
return (
@@ -64,8 +63,8 @@
onCategoryChange(value === "all" ? null : value as Category)}>
+
+ All
+ {CATEGORIES.map((category) => {category} )}
+
+
-
);
}
```
## components/GlareHover.tsx
Status: added; +108; −0
```diff
@@ -1,0 +1,108 @@
+import React, { useRef } from 'react';
+
+interface GlareHoverProps {
+ width?: string;
+ height?: string;
+ background?: string;
+ borderRadius?: string;
+ borderColor?: string;
+ children?: React.ReactNode;
+ glareColor?: string;
+ glareOpacity?: number;
+ glareAngle?: number;
+ glareSize?: number;
+ transitionDuration?: number;
+ playOnce?: boolean;
+ className?: string;
+ style?: React.CSSProperties;
+}
+
+const GlareHover: React.FC
-
- {CATEGORIES.map((category) => )}
-
+
+ {children}
+
+ );
+};
+
+export default GlareHover;
```
## components/Header.tsx
Status: modified; +3; −6
```diff
@@ -115,7 +115,7 @@
>
{links.map(([label, href]) => {
- const active = !href.includes("#") && (pathname === href || pathname.startsWith(`${href}/`));
+ const active = pathname === href || pathname.startsWith(`${href}/`);
return (
+ {links.map(([label, href]) => {label})}
- {links.map(([label, href]) => setMenuOpen(false)} aria-current={!href.includes("#") && (pathname === href || pathname.startsWith(`${href}/`)) ? "page" : undefined}>{label})}
+ Search libraries
- {
- setMenuOpen(false);
- if (pathname === "/") document.querySelector
+ {DOMAINS.map((domain) => (
+ // eslint-disable-next-line @next/next/no-img-element
+ })
+ ))}
+
+ );
+}
```
## components/LibraryCard.tsx
Status: modified; +2; −2
```diff
@@ -48,8 +48,8 @@
-