Refactor marketplace and theme components

src/components/marketplace.tsx

@@ -4,25 +4,32 @@ import ThemesSearch from "./themes-search";
 import { getAllThemes, getThemesFromSearch, ZenTheme } from "@/lib/themes";
 import ThemeCard from "./theme-card";
 import { Button } from "./ui/button";
+import StickyBox from "react-sticky-box";
 
 export default function MarketplacePage({ themes }: { themes: ZenTheme[] }) {
 	const [searchInput, setSearchInput] = React.useState("");
 	const [tags, setTags] = React.useState<string[]>(["all"]);
 
 	return (
-		<div className="mx-auto flex h-full w-full flex-col items-center justify-center">
+		<div className="mx-auto flex flex-col md:flex-row h-full w-full relative">
-			<div className="mx-auto mb-12 w-full border-b bg-surface pb-24 pt-48 text-center dark:bg-[#121212]">
+			<div className="relative shadow bg-surface w-full lg:w-fit lg:rounded-br-lg lg:rounded-tr-lg lg:mt-24 py-48 lg:py-32 px-10 dark:bg-[#121212] w-full lg:w-1/2 xl:w-1/3 2xl:w-1/4">
-				<div className="lg:px-none mx-auto w-full px-2 lg:w-1/2 xl:w-1/2">
+				<StickyBox
-					<h1 className="text-4xl font-bold lg:text-7xl">Themes Store</h1>
+					className="h-fit min-w-52 text-xs text-muted-foreground lg:mb-0"
-					<ThemesSearch
+					offsetTop={120}
-						input={searchInput}
+				>
-						setInput={setSearchInput}
+						<h1 className="text-4xl font-bold lg:text-7xl">Themes Store</h1>
-						tags={tags}
+						<p className="mt-4 text-lg text-muted-foreground">
-						setTags={setTags}
+							Discover and install themes for Zen Browser.
-					/>
+						</p>
-				</div>
+						<ThemesSearch
+							input={searchInput}
+							setInput={setSearchInput}
+							tags={tags}
+							setTags={setTags}
+						/>
+				</StickyBox>
 			</div>
-			<div className="mt-10 grid w-full grid-cols-1 gap-8 px-5 md:grid-cols-2 lg:w-1/2 lg:px-0 xl:w-2/3 xl:grid-cols-3 2xl:w-3/4 2xl:grid-cols-4">
+			<div className="mt-10 grid w-full grid-cols-1 pt-12 gap-8 lg:gap-y-16 px-5 xl:grid-cols-2 lg:w-1/2 lg:px-10 xl:w-2/3 2xl:w-3/4 2xl:grid-cols-3">
 				{getThemesFromSearch(themes, searchInput, tags).map((theme) => (
 					<ThemeCard key={theme.name} theme={theme} />
 				))}

src/components/theme-card.tsx

@@ -31,16 +31,14 @@ export default function ThemeCard({
 				window.open(`/themes/${theme.id}`, "_self");
 			}}
 			className={ny(
-				"border-grey-900 flex w-full cursor-pointer select-none flex-col justify-start rounded-lg border bg-muted p-5 shadow-sm transition duration-300 ease-in-out hover:border-blue-500 hover:bg-surface hover:shadow-lg dark:border-muted dark:bg-muted/50",
+				"flex w-full cursor-pointer select-none flex-col justify-start p-5",
 				className,
 			)}
 		>
 			<img
 				src={theme.image}
 				alt={theme.name}
-				width={500}
+				className="h-48 rounded-xl border-2 object-cover shadow overflow-hidden border-[rgba(0,0,0,.5)] dark:border-[#333]"
-				height={500}
-				className="h-32 w-full rounded-lg border object-cover shadow"
 			/>
 			<h2 className="mt-4 overflow-ellipsis text-start text-xl font-bold">
 				{theme.name.substring(0, maxNameLen).trim() +

src/components/theme-page.tsx

@@ -30,9 +30,7 @@ export default async function ThemePage({ themeID }: { themeID: string }) {
 				<img
 					src={theme.image}
 					alt={theme.name}
-					width={500}
+					className="f-full rounded-lg border-2 object-cover shadow"
-					height={500}
-					className="w-full rounded-lg border-2 object-cover shadow"
 				/>
 				<h1 className="mt-5 text-2xl font-bold">{theme.name}</h1>
 				<p className="mt-2 text-sm text-muted-foreground">

src/components/themes-search.tsx

@@ -26,6 +26,7 @@ export default function ThemesSearch({
 					placeholder="Search themes"
 					className="w-full border-none bg-transparent text-black focus:border-none focus:outline-none focus:ring-0 dark:text-white"
 				/>
+				{/*
 				<Button
 					onClick={() =>
 						window.open(
@@ -42,7 +43,7 @@ export default function ThemesSearch({
 					className="hidden rounded-full rounded-l-none border-l border-black text-muted dark:border-none md:block"
 				>
 					Create your theme
-				</Button>
+				</Button>*/}
 			</div>
 			<div className="mt-4 flex flex-wrap gap-2">
 				{TAGS.map((tag) => (
@@ -51,10 +52,10 @@ export default function ThemesSearch({
 						key={tag}
 						onClick={() => setTags([tag])}
 						className={ny(
-							`!rounded-full px-5 ${tags.includes(tag) ? "bg-black text-white dark:bg-white dark:text-black" : ""}`,
+							`!rounded-full px-5 !min-w-24 !py-2 !h-fit ${tags.includes(tag) ? "bg-black text-white dark:bg-white dark:text-black" : ""}`,
 						)}
 					>
-						{tag}
+						{tag.replace(/-/g, " ")}
 					</Button>
 				))}
 			</div>