max/memorium
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

feat: refactor whole bunch of stuff

Browse Source
This commit is contained in:
Max Richter
2025-11-02 19:03:11 +01:00
parent 81ebc8f5e0
commit e6b90cb785
56 changed files with 753 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/PageHero.tsx
View File

@@ -6,23 +6,22 @@ import { IconArrowNarrowLeft } from "@components/icons.tsx";
import { IconEdit } from "@components/icons.tsx";
import { useContext } from "preact/hooks";
const HeroContext = createContext<{ image?: string; thumbnail?: string }>({
const HeroContext = createContext<{ image?: string; thumbhash?: string }>({
image: undefined,
thumbnail: undefined,
thumbhash: undefined,
});
function Wrapper(
{ children, image, thumbnail }: {
{ children, image, thumbhash }: {
children: ComponentChildren;
image?: string;
thumbnail?: string;
thumbhash?: string;
},
) {
return (
<div
class={`flex justify-between flex-col relative w-full ${
image ? "min-h-[400px]" : "min-h-[200px]"
} rounded-3xl overflow-hidden`}
class={`flex justify-between flex-col relative w-full ${image ? "min-h-[400px]" : "min-h-[200px]"
} rounded-3xl overflow-hidden`}
>
<HeroContext.Provider value={{ image }}>
{image &&
@@ -30,7 +29,7 @@ function Wrapper(
<Image
fill
src={image}
thumbnail={thumbnail}
thumbhash={thumbhash}
alt="Recipe Banner"
// style={{ objectPosition: "0% 25%" }}
class="absolute object-cover w-full h-full -z-10"
@@ -52,9 +51,8 @@ function Title(
return (
<OuterTag
href={link}
class={`${
ctx.image ? "noisy-gradient" : ""
} after:opacity-90 flex gap-4 items-center ${ctx.image ? "pt-12" : ""}`}
class={`${ctx.image ? "noisy-gradient" : ""
} after:opacity-90 flex gap-4 items-center ${ctx.image ? "pt-12" : ""}`}
>
<h2
class="flex gap-2 items-center text-4xl font-bold z-10"
@@ -83,9 +81,8 @@ function EditLink({ href }: { href: string }) {
const ctx = useContext(HeroContext);
return (
<a
class={`px-4 py-2 ${
ctx.image ? "bg-gray-300 text-gray-800" : "text-gray-200"
} rounded-lg flex gap-1 items-center`}
class={`px-4 py-2 ${ctx.image ? "bg-gray-300 text-gray-800" : "text-gray-200"
} rounded-lg flex gap-1 items-center`}
href={href}
>
<IconEdit class="w-5 h-5" />