9599c606cf
The code changes include: - Importing the `Image` component from `next/legacy/image` instead of `next/image` in multiple files. - Adding a new `CachedImage` component that uses the `Image` component with a custom loader. - Updating the `Logo` component to use the `CachedImage` component instead of the `img` tag. Recent user commits and repository commits do not provide additional context for the commit message.
51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
|
|
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 { ny } from "@/lib/utils";
|
|
|
|
const ThemeCardWrapper = styled.div`
|
|
`;
|
|
|
|
export default function ThemeCard({
|
|
theme,
|
|
className
|
|
}: {
|
|
theme: ZenTheme;
|
|
className?: string;
|
|
}) {
|
|
|
|
const maxNameLen = 50;
|
|
const maxDescLen = 100;
|
|
|
|
return (
|
|
<ThemeCardWrapper onClick={(event) => {
|
|
if (event.target instanceof HTMLAnchorElement) return;
|
|
window.open(`/themes/${theme.id}`, "_self");
|
|
}} className={ny("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 ", className)}>
|
|
<img src={theme.image} alt={theme.name} width={500} height={500}
|
|
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.substring(0, maxNameLen).trim() + (theme.name.length > maxNameLen ? "..." : "")}</h2>
|
|
<div className="flex mt-2">
|
|
{theme.homepage && (
|
|
<>
|
|
<a href={theme.homepage} className="text-blue-500 text-md" target="_blank" rel="noopener noreferrer">
|
|
Homepage
|
|
</a>
|
|
<span className="text-muted-foreground text-md mx-2">
|
|
{"·"}
|
|
</span>
|
|
</>
|
|
)}
|
|
<a href={getThemeAuthorLink(theme)} className="text-blue-500 text-md" target="_blank" rel="noopener noreferrer">
|
|
Author
|
|
</a>
|
|
</div>
|
|
<p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">
|
|
{theme.description.substring(0, maxDescLen).trim() +
|
|
(theme.description.length > maxDescLen ? "..." : "")}
|
|
</p>
|
|
</ThemeCardWrapper>
|
|
);
|
|
}
|