fix: make it work with new vite

components/Button.tsx

@@ -1,12 +1,10 @@
 import { ButtonHTMLAttributes } from "preact";
-import { IS_BROWSER } from "fresh/runtime";
 
 export function Button(props: ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
     <button
       {...props}
-      disabled={!IS_BROWSER || props.disabled}
-      class={`px-2 py-1  ${props.class ? props.class : " "}`}
+      class={`cursor-pointer px-2 py-1 ${props.class ? props.class : ""}`}
     />
   );
 }

components/Card.tsx

@@ -1,7 +1,6 @@
 import { isYoutubeLink } from "@lib/string.ts";
 import { IconBrandYoutube } from "@components/icons.tsx";
 import { SmallRating } from "@components/Rating.tsx";
-import { Link } from "@islands/Link.tsx";
 import { parseRating } from "@lib/helpers.ts";
 import { GenericResource, getNameOfResource } from "@lib/marka/schema.ts";
 
@@ -24,7 +23,7 @@ export function Card(
     rating?: number;
   },
 ) {
-  const backgroundStyle: preact.JSX.CSSProperties = {
+  const backgroundStyle: preact.CSSProperties = {
     backgroundSize: "cover",
     backgroundColor: backgroundColor,
   };
@@ -36,7 +35,7 @@ export function Card(
   }
 
   return (
-    <Link
+    <a
       href={link}
       style={backgroundStyle}
       data-thumb={thumbhash}
@@ -88,7 +87,7 @@ export function Card(
         )}
       </div>
       <div class="absolute inset-x-0 bottom-0 h-3/4" />
-    </Link>
+    </a>
   );
 }
 

components/Image.tsx

@@ -1,5 +1,4 @@
 import { asset } from "fresh/runtime";
-import * as CSS from "csstype";
 
 interface ResponsiveAttributes {
   srcset: string;
@@ -38,7 +37,7 @@ const Image = (
     fill?: boolean;
     width?: number | string;
     height?: number | string;
-    style?: CSS.HtmlAttributes;
+    style?: preact.CSSProperties;
   },
 ) => {
   const responsiveAttributes = generateResponsiveAttributes(

components/PageHero.tsx

@@ -21,7 +21,7 @@ function Wrapper(
   return (
     <div
       class={`flex justify-between flex-col relative w-full ${
-        image ? "min-h-[400px]" : "min-h-[200px]"
+        image ? "min-h-100" : "min-h-50"
       } rounded-3xl overflow-hidden`}
     >
       <HeroContext.Provider value={{ image }}>
@@ -62,7 +62,7 @@ function Title(
       >
         {children}
         {link &&
-          <IconExternalLink />}
+          <IconExternalLink class="h-6 w-6" />}
       </h2>
     </OuterTag>
   );
@@ -110,7 +110,7 @@ function Subline(
   const ctx = useContext(HeroContext);
   return (
     <div
-      class={`relative flex items-center z-10 flex gap-5 font-sm text-light mt-3`}
+      class={`relative items-center z-10 flex gap-5 font-sm text-light mt-3`}
       style={{ color: ctx.image ? "#1F1F1F" : "white" }}
     >
       {children}