const [apps, setApps] = useState([]);

const [searchQuery, setSearchQuery] = useState('');

const [isLoading, setIsLoading] = useState(true);

const [activeCategory, setActiveCategory] = useState('All');

const [availableCategories, setAvailableCategories] = useState([]);

const [sortOrder, setSortOrder] = useState('alphabetical'); // 'alphabetical' or 'newest'

useEffect(() => {

setIsLoading(true);

fetch('/apps/apps.json')

.then((response) => response.json())

.then((data) => {

const flattenedApps = [];

const cats = ['All'];

Object.keys(data).forEach((categoryKey) => {

if (categoryKey !== 'Bests') {

cats.push(data[categoryKey].name);

data[categoryKey].apps.forEach((app) => {

flattenedApps.push({

...app,

categoryName: data[categoryKey].name,

name: app.title,

path: app.to,

id: app.slug,

});

});

}

});

setApps(flattenedApps);

setAvailableCategories(cats);

})

.catch((error) => console.error('Error fetching apps:', error))

.finally(() => setIsLoading(false));

}, []);

const sortedApps = [...apps]

.filter((app) => {

const query = searchQuery.toLowerCase();

const matchesSearch =

app.name.toLowerCase().includes(query) ||

app.description.toLowerCase().includes(query);

const matchesCategory =

activeCategory === 'All' || app.categoryName === activeCategory;

return matchesSearch && matchesCategory;

})

.sort((a, b) => {

if (sortOrder === 'newest') {

return new Date(b.date || 0) - new Date(a.date || 0);

}

return a.name.localeCompare(b.name);

});

return (

<div className="min-h-screen bg-[#F5F5F0] text-[#1A1A1A] font-sans selection:bg-[#C0B298] selection:text-black pt-24 pb-20">

<Seo title="Fezcodex | Apps" description="Software Tools." />

<div className="max-w-[1800px] mx-auto px-6 md:px-12">

<header className="mb-12 pt-12 border-b border-[#1A1A1A]/10 pb-12">

<Link

to="/"

className="inline-flex items-center gap-2 mb-8 font-outfit text-xs uppercase tracking-widest text-black/40 hover:text-[#8D4004] transition-colors"

>

<ArrowLeftIcon /> Home

</Link>

<h1 className="font-playfairDisplay text-7xl md:text-9xl text-[#1A1A1A] mb-6">

Software

</h1>

<div className="flex flex-col md:flex-row justify-between items-end gap-8">

<p className="font-outfit text-sm text-[#1A1A1A]/60 max-w-lg leading-relaxed">

Functional utilities, interactive experiments, and digital toys.

Every module is a synthesis of logic and aesthetic.

</p>

<div className="relative group border-b border-[#1A1A1A]/20 focus-within:border-[#1A1A1A] transition-colors min-w-[300px]">

<input

type="text"

placeholder="Search Apps..."

value={searchQuery}

onChange={(e) => setSearchQuery(e.target.value)}

className="w-full bg-transparent py-2 outline-none font-outfit text-sm placeholder-[#1A1A1A]/30"

/>

<MagnifyingGlassIcon className="absolute right-0 top-1/2 -translate-y-1/2 text-[#1A1A1A]/40" />

</div>

</div>

</header>

{/* Category Filter & Sort */}

<div className="flex flex-col md:flex-row justify-between items-center gap-8 mb-20 pb-4 border-b border-[#1A1A1A]/5">

<div className="flex gap-2 overflow-x-auto no-scrollbar flex-1 w-full">

{availableCategories.map((cat) => (

<button

key={cat}

onClick={() => setActiveCategory(cat)}

className={`px-6 py-2 rounded-full font-outfit text-[10px] uppercase tracking-[0.2em] transition-all whitespace-nowrap ${

>

{cat}

</button>

))}

</div>

<div className="flex bg-white rounded-full p-1 border border-[#1A1A1A]/5 shadow-sm shrink-0">

<button

onClick={() => setSortOrder('alphabetical')}

className={`flex items-center gap-2 px-4 py-2 rounded-full font-outfit text-[10px] uppercase tracking-widest transition-all ${sortOrder === 'alphabetical' ? 'bg-[#1A1A1A] text-white' : 'text-[#1A1A1A]/40 hover:text-[#1A1A1A]'}`}

>

<SortAscendingIcon size={14} /> A-Z

</button>

<button

onClick={() => setSortOrder('newest')}

className={`flex items-center gap-2 px-4 py-2 rounded-full font-outfit text-[10px] uppercase tracking-widest transition-all ${sortOrder === 'newest' ? 'bg-[#1A1A1A] text-white' : 'text-[#1A1A1A]/40 hover:text-[#1A1A1A]'}`}

>

<CalendarBlankIcon size={14} /> Newest

</button>

</div>

</div>

{isLoading ? (

<div className="py-32 text-center font-outfit text-[#1A1A1A]/40 uppercase tracking-widest">

Connecting to Application Registry...

</div>

) : (

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-12">

{sortedApps.map((app) => {

const categoryColor =

categoryColors[app.categoryName] || categoryColors.Default;

const Icon = appIcons[app.icon] || appIcons[`${app.icon}Icon`];

return (

<Link key={app.id} to={app.path} className="group block h-full">

<div className="relative aspect-square w-full bg-[#EBEBEB] overflow-hidden mb-8 border border-[#1A1A1A]/5 shadow-sm group-hover:shadow-2xl transition-all duration-700 rounded-sm">

{/* Art/Image with Category Overlay */}

<div className="absolute inset-0 transition-transform duration-1000 group-hover:scale-105">

<LuxeArt

seed={app.name}

className="w-full h-full opacity-80 mix-blend-multiply"

/>

<div

className="absolute inset-0 opacity-10 group-hover:opacity-20 transition-opacity duration-500"

style={{ backgroundColor: categoryColor }}

/>

</div>

<div

className="absolute top-6 left-6 w-16 h-16 flex items-center justify-center bg-white/90 backdrop-blur-sm rounded-full shadow-md border border-[#1A1A1A]/5 group-hover:bg-[#1A1A1A] group-hover:text-white transition-all duration-500"

style={{ color: categoryColor }}

>

{Icon && <Icon size={28} weight="light" />}

</div>

<div className="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-[#1A1A1A] text-white p-4 rounded-full">

<ArrowUpRightIcon size={24} />

</div>

</div>

<div className="space-y-3 px-2">

<span

className="font-outfit text-[10px] uppercase tracking-widest"

style={{ color: categoryColor }}

>

{app.categoryName}

</span>

<h2 className="font-playfairDisplay text-3xl text-[#1A1A1A] group-hover:italic transition-all leading-tight">

{app.name}

</h2>

<p className="font-outfit text-sm text-[#1A1A1A]/60 line-clamp-2 leading-relaxed italic">

{app.description}

</p>

</div>

</Link>

);

})}

</div>

)}

</div>

</div>

);