64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import EntryList from '../components/EntryList';
|
|
import SearchBar from '../components/SearchBar';
|
|
import './Home.css';
|
|
|
|
const Home = () => {
|
|
const [entries, setEntries] = useState([]);
|
|
const [filteredEntries, setFilteredEntries] = useState([]);
|
|
|
|
useEffect(() => {
|
|
// In a real app, this would fetch from an API or data file
|
|
// For now, we'll use mock data
|
|
const mockEntries = [
|
|
{
|
|
id: 1,
|
|
term: "Hacker",
|
|
definition: "A person who enjoys exploring the details of programmable systems and how to stretch their capabilities.",
|
|
category: "Core Terms"
|
|
},
|
|
{
|
|
id: 2,
|
|
term: "Guru",
|
|
definition: "A person who has achieved a high level of skill in a particular field or domain.",
|
|
category: "Core Terms"
|
|
},
|
|
{
|
|
id: 3,
|
|
term: "Foo",
|
|
definition: "A generic term used as a placeholder in examples and documentation.",
|
|
category: "Technical Terms"
|
|
}
|
|
];
|
|
|
|
setEntries(mockEntries);
|
|
setFilteredEntries(mockEntries);
|
|
}, []);
|
|
|
|
const handleSearch = (searchTerm) => {
|
|
if (!searchTerm) {
|
|
setFilteredEntries(entries);
|
|
return;
|
|
}
|
|
|
|
const filtered = entries.filter(entry =>
|
|
entry.term.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
entry.definition.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
setFilteredEntries(filtered);
|
|
};
|
|
|
|
return (
|
|
<div className="home">
|
|
<div className="hero">
|
|
<h2>Explore Hacker Culture</h2>
|
|
<p>Discover the terminology that defines computer hacker culture</p>
|
|
</div>
|
|
<SearchBar onSearch={handleSearch} />
|
|
<EntryList entries={filteredEntries} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Home; |