Frontend refactor

dev-share-ui/app/search/page.tsx

@@ -1,64 +1,9 @@
-'use client';
-
-import { useState } from 'react';
 import HeroSection from '@/components/HeroSection';
-import { mockResources } from '@/lib/data';
-import ResourceCard from '@/components/ResourceCard';
-import FromAISearchResourceCard from '@/components/FromAISearchResourceCard';
-import { handleGlobalSearch, searchResources } from '@/services/search-service';
 
 export default function SearchPage() {
-  const [resources, setResources] = useState(mockResources);
-  const [isSearching, setIsSearching] = useState(false);
-  const [SearchQuery, setSearchQuery] = useState('');
-  const topRelative = 6;
-
-  const handleSearch = async (query: string) => {
-    setIsSearching(true);
-    setSearchQuery(query);
-    setResources([]);
-
-    const result = await searchResources(query);
-    if (result.length === 0) {
-      await handleGlobalSearch();
-    } else {
-      setResources(result);
-    }
-    setIsSearching(false);
-  };
-
-  const handleResourceAction = (id: string, action: 'like' | 'bookmark') => {
-    // TODO: Integrate with feedback loop API
-    // Integration point for feedback loop:
-    // 1. Send user action to your API
-    // 2. Update resource in your database
-    // 3. Use this data to improve recommendations
-
-    setResources((prevResources) =>
-      prevResources.map((resource) => {
-        if (resource.id === id) {
-          if (action === 'like') {
-            return {
-              ...resource,
-              likes: resource.isLiked ? resource.likes - 1 : resource.likes + 1,
-              isLiked: !resource.isLiked,
-            };
-          } else {
-            return { ...resource, isBookmarked: !resource.isBookmarked };
-          }
-        }
-        return resource;
-      })
-    );
-  };
-
-  const handleSearchSuggestion = (suggestion: string) => {
-    handleSearch(suggestion);
-  };
-
   return (
     <div className="bg-background flex grow pb-16 justify-center items-center">
-      <HeroSection onSearch={handleSearch} isSearching={isSearching} />
+      <HeroSection />
     </div>
   );
 }

dev-share-ui/components/HeroSection.tsx

@@ -1,56 +1,17 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Search, Plus } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { Particles } from '@/components/magicui/particles';
 import { useTheme } from 'next-themes';
-import { useRouter } from 'next/navigation';
 import SearchBar from './SearchBar';
 
-interface HeroSectionProps {
-  onSearch: (query: string) => void;
-  isSearching: boolean;
-}
-
-export default function HeroSection({
-  onSearch,
-  isSearching,
-}: HeroSectionProps) {
-  const [query, setQuery] = useState('');
-  const [placeholderIndex, setPlaceholderIndex] = useState(0);
+export default function HeroSection() {
   const { resolvedTheme } = useTheme();
   const [color, setColor] = useState('#ffffff');
-  const router = useRouter();
+
   useEffect(() => {
     setColor(resolvedTheme === 'dark' ? '#ffffff' : '#000000');
   }, [resolvedTheme]);
-  const placeholders = [
-    'Search resources, tools, guides...',
-    'TypeScript tutorials for beginners',
-    'How to optimize Next.js performance',
-    'GraphQL resources for frontend developers',
-    'Learn CSS Grid and Flexbox',
-    'Node.js backend architecture patterns',
-  ];
-
-  // Rotate placeholder text every 5 seconds
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setPlaceholderIndex((prev) => (prev + 1) % placeholders.length);
-    }, 5000);
-
-    return () => clearInterval(interval);
-  }, [placeholders.length]);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (query.trim()) {
-      onSearch(query);
-      router.push(`/result`);
-    }
-  };
 
   return (
     <section className="w-full bg-background">
@@ -64,27 +25,14 @@ export default function HeroSection({
         <div className="flex flex-col gap-8 py-10">
           <div className="flex flex-row items-center justify-center w-full mb-2">
             <div className="flex flex-col gap-6 ">
-              <h2 className="text-5xl font-bold tracking-tight text-foreground mb-1">
+              <h2 className="text-5xl font-bold tracking-tight text-center text-foreground mb-1">
                 Discover Resources
               </h2>
               <p className="text-sm text-muted-foreground text-center">
                 Find and share valuable community resources
               </p>
             </div>
           </div>
-          {/* <form onSubmit={handleSubmit} className="flex w-full space-x-2">
-            <div className="relative flex-1 flex items-center justify-center">
-              <Search className="relative left-8 text-muted-foreground" />
-              <Input
-                type="text"
-                placeholder={placeholders[placeholderIndex]}
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                className="pl-10 h-11 rounded-lg bg-card transition-all duration-300 focus:ring-2 focus:ring-primary/20 w-3/5"
-                disabled={isSearching}
-              />
-            </div>
-          </form> */}
           <SearchBar />
         </div>
       </div>

dev-share-ui/components/Navbar.tsx

@@ -2,19 +2,12 @@
 
 import Link from 'next/link';
 import { BookMarked } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import { ThemeToggle } from '@/components/ThemeToggle';
 
 export default function Navbar() {
   return (
-    <header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-sm px-4">
-      <div className="container flex h-16 items-center justify-between mx-auto max-w-7xl">
+    <header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-sm">
+      <div className="flex h-16 items-center justify-between px-12">
         <div className="flex items-center gap-2">
           <BookMarked className="w-6 h-6" />
           <Link href="/" className="text-xl font-bold tracking-tight">
@@ -23,68 +16,14 @@ export default function Navbar() {
         </div>
 
         <nav className="hidden md:flex items-center gap-8">
-          <Link
-            href="/"
-            className="text-md font-medium text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Discover
-          </Link>
           <Link
             href="/share"
             className="text-md font-medium text-muted-foreground transition-colors hover:text-foreground"
           >
             Share
           </Link>
-          <Link
-            href="/collections"
-            className="text-md font-medium text-muted-foreground transition-colors hover:text-foreground"
-          >
-            Collections
-          </Link>
-        </nav>
-
-        <div className="flex items-center gap-4">
           <ThemeToggle />
-          <div className="hidden md:block">
-            <Button>Sign In</Button>
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild className="md:hidden">
-              <Button variant="ghost" size="icon">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="h-5 w-5"
-                >
-                  <line x1="4" x2="20" y1="12" y2="12" />
-                  <line x1="4" x2="20" y1="6" y2="6" />
-                  <line x1="4" x2="20" y1="18" y2="18" />
-                </svg>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem asChild>
-                <Link href="/">Discover</Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem asChild>
-                <Link href="/share">Share</Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem asChild>
-                <Link href="/collections">Collections</Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem asChild>
-                <Link href="/sign-in">Sign In</Link>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
+        </nav>
       </div>
     </header>
   );