feat: add frontend source code
Add search-zen-50 React SPA source code to frontend/ directory. Build artifacts (dist, node_modules, lock files) are gitignored. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
6b418057ef
commit
168cb78fab
89 changed files with 5438 additions and 0 deletions
93
frontend/src/pages/Index.tsx
Normal file
93
frontend/src/pages/Index.tsx
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
import { Search as SearchIcon, Settings } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { SearchInput } from "@/components/SearchInput";
|
||||
import { CategoryTabs } from "@/components/CategoryTabs";
|
||||
import { ResultCard } from "@/components/ResultCard";
|
||||
import { ResultSkeleton } from "@/components/ResultSkeleton";
|
||||
import { useSearch } from "@/hooks/use-search";
|
||||
|
||||
const Index = () => {
|
||||
const { query, results, isLoading, hasSearched, activeCategory, filteredResults, search, setCategory, setQuery, reset } = useSearch();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const settingsButton = (
|
||||
<button
|
||||
onClick={() => navigate("/preferences")}
|
||||
className="p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
|
||||
aria-label="Preferences"
|
||||
>
|
||||
<Settings size={18} />
|
||||
</button>
|
||||
);
|
||||
|
||||
// Home state
|
||||
if (!hasSearched) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-screen px-4 relative">
|
||||
<div className="absolute top-4 right-4">{settingsButton}</div>
|
||||
<button onClick={reset} className="mb-8 flex items-center gap-2 group">
|
||||
<SearchIcon size={28} className="text-primary" />
|
||||
<h1 className="text-3xl font-mono font-bold text-foreground tracking-tight">kafka</h1>
|
||||
</button>
|
||||
<SearchInput query={query} onQueryChange={setQuery} onSearch={search} autoFocus />
|
||||
<p className="mt-6 text-sm text-muted-foreground">Private meta-search, powered by open source.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Results state
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<header className="sticky top-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
|
||||
<div className="max-w-3xl mx-auto px-4 py-3 flex items-center gap-4">
|
||||
<button onClick={reset} className="flex items-center gap-1.5 shrink-0 group">
|
||||
<SearchIcon size={18} className="text-primary" />
|
||||
<span className="font-mono font-bold text-foreground text-lg tracking-tight">kafka</span>
|
||||
</button>
|
||||
<SearchInput query={query} onQueryChange={setQuery} onSearch={search} compact />
|
||||
<div className="shrink-0">{settingsButton}</div>
|
||||
</div>
|
||||
<div className="max-w-3xl mx-auto px-4 pb-2">
|
||||
<CategoryTabs active={activeCategory} onChange={setCategory} />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 max-w-3xl mx-auto w-full px-4 py-6">
|
||||
{isLoading ? (
|
||||
<ResultSkeleton />
|
||||
) : filteredResults && filteredResults.length > 0 ? (
|
||||
<>
|
||||
<p className="text-xs text-muted-foreground mb-4">
|
||||
About {results?.number_of_results} results for "<span className="font-medium text-foreground">{results?.query}</span>"
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
{filteredResults.map((result, i) => (
|
||||
<ResultCard key={`${result.url}-${i}`} result={result} />
|
||||
))}
|
||||
</div>
|
||||
{results?.suggestions && results.suggestions.length > 0 && (
|
||||
<div className="mt-8 pt-6 border-t border-border">
|
||||
<p className="text-xs text-muted-foreground mb-2">Related searches</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{results.suggestions.map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => { setQuery(s); search(s); }}
|
||||
className="text-sm px-3 py-1.5 rounded-md bg-secondary text-secondary-foreground hover:bg-secondary/80 transition-colors"
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-muted-foreground text-center py-12">No results found for this category.</p>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
24
frontend/src/pages/NotFound.tsx
Normal file
24
frontend/src/pages/NotFound.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { useLocation } from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
|
||||
const NotFound = () => {
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
console.error("404 Error: User attempted to access non-existent route:", location.pathname);
|
||||
}, [location.pathname]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-muted">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold">404</h1>
|
||||
<p className="mb-4 text-xl text-muted-foreground">Oops! Page not found</p>
|
||||
<a href="/" className="text-primary underline hover:text-primary/90">
|
||||
Return to Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFound;
|
||||
88
frontend/src/pages/Preferences.tsx
Normal file
88
frontend/src/pages/Preferences.tsx
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
import { useNavigate } from "react-router-dom";
|
||||
import { ArrowLeft, Sun, Moon } from "lucide-react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { usePreferences } from "@/contexts/PreferencesContext";
|
||||
|
||||
const Preferences = () => {
|
||||
const navigate = useNavigate();
|
||||
const { theme, engines, setTheme, toggleEngine } = usePreferences();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
|
||||
<div className="max-w-2xl mx-auto px-4 py-3 flex items-center gap-3">
|
||||
<Button variant="ghost" size="icon" onClick={() => navigate("/")} className="text-muted-foreground hover:text-foreground">
|
||||
<ArrowLeft size={18} />
|
||||
</Button>
|
||||
<h1 className="font-mono font-bold text-lg text-foreground tracking-tight">Preferences</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-2xl mx-auto px-4 py-8 space-y-6">
|
||||
{/* Appearance */}
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground">Appearance</CardTitle>
|
||||
<CardDescription className="text-muted-foreground">Choose your preferred theme.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setTheme("light")}
|
||||
className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-colors ${
|
||||
theme === "light"
|
||||
? "border-primary bg-primary/10 text-foreground"
|
||||
: "border-border text-muted-foreground hover:border-muted-foreground/40"
|
||||
}`}
|
||||
>
|
||||
<Sun size={18} />
|
||||
<span className="text-sm font-medium">Light</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTheme("dark")}
|
||||
className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-colors ${
|
||||
theme === "dark"
|
||||
? "border-primary bg-primary/10 text-foreground"
|
||||
: "border-border text-muted-foreground hover:border-muted-foreground/40"
|
||||
}`}
|
||||
>
|
||||
<Moon size={18} />
|
||||
<span className="text-sm font-medium">Dark</span>
|
||||
</button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Search Engines */}
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground">Search Engines</CardTitle>
|
||||
<CardDescription className="text-muted-foreground">Enable or disable engines used for queries.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{engines.map((engine) => (
|
||||
<div key={engine.id} className="flex items-center justify-between">
|
||||
<Label htmlFor={engine.id} className="text-foreground font-medium cursor-pointer">
|
||||
{engine.name}
|
||||
</Label>
|
||||
<Switch
|
||||
id={engine.id}
|
||||
checked={engine.enabled}
|
||||
onCheckedChange={() => toggleEngine(engine.id)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Preferences;
|
||||
Loading…
Add table
Add a link
Reference in a new issue