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

refector: Add useEffect dependency and optimize the tailwindcss

next.config.mjs

@@ -1,10 +1,19 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'raw.githubusercontent.com',
+      },
+    ],
+  },
   experimental: {
     serverActions: {
       // edit: updated to new key. Was previously `allowedForwardedHosts`
       allowedOrigins: ['localhost:3000', 'get-zen.vercel.app'],
     },
+
   },
 };
 

src/components/theme-card.tsx

@@ -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 { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";import { Button } from "./ui/button";
-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">
+    }} 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 ">
-      <img src={theme.image} alt={theme.name} className="w-full h-32 object-cover rounded-lg border shadow" />
+      <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 && (

src/components/theme-page.tsx

@@ -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 && (