joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Refactor ThemePage component to improve performance and readability

Browse Source
This commit is contained in:
Mauro Balades
2024-08-16 23:03:25 +02:00
parent 2bc7f378b4
commit 6f09cea3d2
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/theme-page.tsx
View File

@@ -12,8 +12,8 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
}, []);
return (
<div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative">
<div className="flex flex-col w-md border-r p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm relative">
<div className="mt-24 lg:mt-56 flex-col lg:flex-row relative flex mx-auto items-start relative">
<div className="flex flex-col relative lg:fixed w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
<img src={theme.image} alt={theme.name} className="w-full object-cover rounded-lg border shadow" />
<h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
<p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
@@ -36,7 +36,7 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
<p id="install-theme-error" className="text-muted-foreground text-sm mt-2">You need to have Zen Browser installed to install this theme. <a href="/download" className="text-blue-500">Download now!</a></p>
</div>
<hr className="block my-4 lg:hidden" />
<div className="flex flex-col p-5 !pt-0 max-w-xl min-w-xl w-full">
<div className="flex flex-col border-l lg:min-h-96 pl-10 lg:ml-96 max-w-xl lg:min-w-96 w-full">
<div className="flex my-2 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
<ChevronLeft className="w-4 h-4 mr-1" />
<h3 className="text-md">Go back</h3>