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

Merge pull request #42 from PushpankDhruw/pr/theme-page

Browse Source 
refector: Add useEffect dependency and optimize the tailwindcss
This commit is contained in:
mauro 🤙
2024-08-22 23:06:20 +02:00
committed by GitHub
parent a3544ddd0b 38453638e1
commit cfab24a766
3 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import Image from "next/image";
import { getThemeAuthorLink, ZenTheme } from "@/lib/themes";
import styled from "styled-components";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
import { Button } from "./ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";import { Button } from "./ui/button";
const ThemeCardWrapepr = styled.div`
`;
@@ -15,8 +15,9 @@ export default function ThemeCard({
<ThemeCardWrapepr onClick={(event) => {
if (event.target instanceof HTMLAnchorElement) return;
window.open(`/themes/${theme.id}`, "_self");
}} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark: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-lg border shadow" />
}} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark: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 ">
<Image src={theme.image} alt={theme.name} width={500} height={500} quality={100}
className="w-full h-32 object-cover rounded-lg border shadow" />
<h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name}</h2>
<div className="flex mt-2">
{theme.homepage && (

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

@@ -1,3 +1,4 @@
import Image from "next/image";
import { getThemeAuthorLink, getThemeMarkdown, ZenTheme } from "@/lib/themes";
import { Button } from "./ui/button";
import { useEffect, useState } from "react";
@@ -9,12 +10,12 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
const [readme, setReadme] = useState<string | null>(null);
useEffect(() => {
getThemeMarkdown(theme).then(setReadme);
}, []);
}, [theme]);
return (
<div className="mt-24 lg:mt-56 flex-col lg:flex-row relative flex mx-auto items-start relative">
<div className="mt-24 lg:mt-56 flex-col lg:flex-row 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-2 shadow" />
<Image src={theme.image} alt={theme.name} width={500} height={500} className="w-full object-cover rounded-lg border-2 shadow" />
<h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
<p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
{theme.homepage && (