+
+ );
+}
diff --git a/components/DirectoryExplorer.tsx b/components/DirectoryExplorer.tsx
index d04e2ed..f24d558 100644
--- a/components/DirectoryExplorer.tsx
+++ b/components/DirectoryExplorer.tsx
@@ -1,20 +1,30 @@
"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);
@@ -24,42 +34,41 @@ export function DirectoryExplorer({ initialQuery = "" }: { initialQuery?: string
const [saved, setSaved] = 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 @@ interface FilterBarProps {
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 @@ export function FilterBar({ activeCategory, activeStacks, activeUseCases, query,
onCategoryChange(value === "all" ? null : value as Category)}>
+
+ All
+ {CATEGORIES.map((category) => {category} )}
+
+
);
}
diff --git a/components/GlareHover.tsx b/components/GlareHover.tsx
new file mode 100644
index 0000000..d5b12c6
--- /dev/null
+++ b/components/GlareHover.tsx
@@ -0,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;
diff --git a/components/Header.tsx b/components/Header.tsx
index 9189469..bd5208c 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -115,7 +115,7 @@ export function Header() {
>
{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]) => setMenuOpen(false)} aria-current={!href.includes("#") && (pathname === href || pathname.startsWith(`${href}/`)) ? "page" : undefined}>{label})}
- {
- setMenuOpen(false);
- if (pathname === "/") document.querySelector
+ {DOMAINS.map((domain) => (
+ // eslint-disable-next-line @next/next/no-img-element
+ })
+ ))}
+
+ );
+}
diff --git a/components/LibraryCard.tsx b/components/LibraryCard.tsx
index e1acd5e..5148550 100644
--- a/components/LibraryCard.tsx
+++ b/components/LibraryCard.tsx
@@ -48,8 +48,8 @@ export function LibraryCard({ library, saved, onToggleSaved }: LibraryCardProps)
-