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

chore: Update ThemeCard component to open theme page on click

Browse Source
This commit is contained in:
Mauro Balades
2024-08-15 22:18:27 +02:00
parent 10d6a502e2
commit b16302ba24
3 changed files with 66 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/theme-card.tsx
View File

@@ -1,6 +1,6 @@
import { ZenTheme } from "@/lib/themes";
import styled from "styled-components";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
import { Button } from "./ui/button";
const ThemeCardWrapepr = styled.div`
@@ -12,37 +12,19 @@ export default function ThemeCard({
theme: ZenTheme;
}) {
return (
<Dialog>
<DialogTrigger>
<ThemeCardWrapepr className="flex flex-col justify-start p-6 rounded-lg shadow-md bg-muted/50 border border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none">
<img src={theme.image} alt={theme.name} className="w-full h-32 object-cover rounded-md" />
<div className="flex">
<h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name}</h2>
{theme.homepage && (
<a href={theme.homepage} className="text-blue-500 text-md ml-4" target="_blank" rel="noopener noreferrer">
Visit Homepage
</a>
)}
</div>
<p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">{theme.description}</p>
</ThemeCardWrapepr>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<img src={theme.image} alt={theme.name} className="w-full h-32 object-cover rounded-md mb-10" />
<DialogTitle>{theme.name}</DialogTitle>
<DialogDescription>{theme.description}</DialogDescription>
<hr className="!my-4" />
<div className="w-full relative flex justify-end">
<Button className="hidden install-theme" zen-theme-id={theme.id}>
Install Theme
</Button>
<p className="text-muted-foreground text-sm install-theme-error">
You need to have Zen Browser installed to use this theme. <a href="/download" className="text-blue-500">Download</a>
</p>
</div>
</DialogHeader>
</DialogContent>
</Dialog>
<ThemeCardWrapepr onClick={() => {
window.open(`/themes/${theme.id}`, "_self");
}} className="flex flex-col justify-start p-6 rounded-lg shadow-md bg-muted/50 border border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none hover:border-blue-500 hover:shadow-lg">
<img src={theme.image} alt={theme.name} className="w-full h-32 object-cover rounded-md" />
<div className="flex">
<h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name}</h2>
{theme.homepage && (
<a href={theme.homepage} className="text-blue-500 text-md ml-4" target="_blank" rel="noopener noreferrer">
Visit Homepage
</a>
)}
</div>
<p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">{theme.description}</p>
</ThemeCardWrapepr>
);
}