>({});
17 |
18 | const filteredResources = useMemo(() => {
19 | return resources.filter((resource) => {
20 | const matchesSearch =
21 | resource.title.toLowerCase().includes(search.toLowerCase()) ||
22 | resource.description.toLowerCase().includes(search.toLowerCase()) ||
23 | resource.tags.some((tag: string) =>
24 | tag.toLowerCase().includes(search.toLowerCase())
25 | );
26 |
27 | const matchesCategory =
28 | !selectedCategory || resource.category === selectedCategory;
29 |
30 | return matchesSearch && matchesCategory;
31 | });
32 | }, [search, selectedCategory]);
33 |
34 | const handleLike = (id: string) => {
35 | setLikes((prev) => ({
36 | ...prev,
37 | [id]: (prev[id] || 0) + 1,
38 | }));
39 | };
40 |
41 | return (
42 |
43 | {/* Navigation */}
44 |
79 |
80 | {/* Header */}
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
93 |
94 |
95 |
96 |
97 | {/* Main Content */}
98 |
99 |
100 | {filteredResources.map((resource) => (
101 |
109 | ))}
110 |
111 |
112 | {filteredResources.length === 0 && (
113 |
114 |
115 | No resources found matching your criteria.
116 |
117 |
120 |
27 |
38 | {categories.map((category) => (
39 |
51 | ))}
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/src/app/components/ResourceCard.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Heart, ExternalLink } from "lucide-react";
3 | import { Resource } from "../types/resource";
4 | import { Tag } from "./Tag";
5 | import { TechIcon } from "./TechIcon";
6 |
7 | interface ResourceCardProps {
8 | resource: Resource;
9 | onLike: (id: string) => void;
10 | }
11 |
12 | export function ResourceCard({ resource, onLike }: ResourceCardProps) {
13 | return (
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | {resource.title}
23 |
24 | {/*
25 | {resource.category}
26 | */}
27 |
28 |
29 |
35 |
36 |
37 |
38 |
39 |
{resource.description}
40 |
41 |
42 | {resource.tags.map((tag) => (
43 |
44 | ))}
45 |
46 |
47 |
48 |
55 |
56 | Added on {new Date(resource.dateAdded).toLocaleDateString()}
57 |
58 |
59 |
12 |
13 | onChange(e.target.value)}
17 | placeholder="Search resources..."
18 | className="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-700 border border-gray-600 text-gray-100 placeholder-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all"
19 | />
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/components/Tag.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Tag as TagIcon } from "lucide-react";
3 | import { getTagColors } from "../utils/tagColors";
4 |
5 | interface TagProps {
6 | label: string;
7 | }
8 |
9 | export function Tag({ label }: TagProps) {
10 | const { bg, text } = getTagColors(label);
11 |
12 | return (
13 |
16 |
17 | {label}
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/components/TechIcon.tsx:
--------------------------------------------------------------------------------
1 | import { Code, Book, Gauge, Accessibility } from "lucide-react";
2 | import Image from "next/image";
3 |
4 | interface TechIconProps {
5 | name: string;
6 | className?: string;
7 | }
8 |
9 | const defaultIcons = {
10 | code: