33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import ThemesSearch from "./themes-search";
|
|
import { getAllThemes, getThemesFromSearch, ZenTheme } from "@/lib/themes";
|
|
import ThemeCard from "./theme-card";
|
|
import { Button } from "./ui/button";
|
|
|
|
export default function MarketplacePage() {
|
|
const [searchInput, setSearchInput] = React.useState("");
|
|
const [tags, setTags] = React.useState<string[]>(["all"]);
|
|
const [themes, setThemes] = React.useState<ZenTheme[]>([]);
|
|
|
|
React.useEffect(() => {
|
|
getAllThemes().then(setThemes);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex flex-col w-full mx-auto items-center justify-center h-full">
|
|
<div className="mx-auto w-full text-center border-b pt-48 pb-24 mb-12 bg-gradient-to-r from-[#f6cfbe] to-[#b9dcf2] dark:from-[#0d1117] dark:to-[#0d1117]">
|
|
<div className="w-full lg:w-1/2 xl:w-1/2 mx-auto px-2 lg:px-none">
|
|
<h1 className="text-4xl lg:text-7xl font-bold">Themes Store</h1>
|
|
<ThemesSearch input={searchInput} setInput={setSearchInput} tags={tags} setTags={setTags} />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-8 mt-10 w-full lg:w-1/2 xl:w-2/3 2xl:w-3/4">
|
|
{getThemesFromSearch(themes, searchInput, tags).map((theme) => (
|
|
<ThemeCard key={theme.name} theme={theme} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|