feat: better layout in a lot of places
This commit is contained in:
@ -11,7 +11,7 @@ export function Card(
|
||||
}}
|
||||
class="text-white rounded-3xl shadow-md p-4 relative overflow-hidden
|
||||
lg:w-56 lg:h-56
|
||||
sm:w-40 sm:h-40
|
||||
sm:w-48 sm:h-48
|
||||
w-32 h-32"
|
||||
>
|
||||
<div class="h-full flex flex-col justify-between relative z-10">
|
||||
|
12
components/Grid.tsx
Normal file
12
components/Grid.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import { ComponentChildren } from "preact";
|
||||
|
||||
export const Grid = ({ children }: { children: ComponentChildren }) => {
|
||||
return (
|
||||
<div
|
||||
class="grid gap-4 py-6"
|
||||
style={{ gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))" }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
15
components/HashTags.tsx
Normal file
15
components/HashTags.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
export const HashTags = ({ tags }: { tags: string[] }) => {
|
||||
return (
|
||||
<div
|
||||
class={`flex gap-2 px-8`}
|
||||
>
|
||||
{tags.map((t) => {
|
||||
return (
|
||||
<span class="bg-gray-700 text-white p-2 rounded-xl text-sm">
|
||||
#{t}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
@ -1,9 +1,13 @@
|
||||
import IconExternalLink from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/external-link.tsx";
|
||||
import { Star } from "@components/Stars.tsx";
|
||||
import IconArrowNarrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-narrow-left.tsx";
|
||||
import IconEdit from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/edit.tsx";
|
||||
|
||||
export function RecipeHero(
|
||||
{ data, subline, backlink }: {
|
||||
{ data, subline, backlink, editLink }: {
|
||||
backlink: string;
|
||||
subline?: string[];
|
||||
editLink?: string;
|
||||
data: { meta?: { image?: string; link?: string }; name: string };
|
||||
},
|
||||
) {
|
||||
@ -31,15 +35,26 @@ export function RecipeHero(
|
||||
|
||||
<div class="flex justify-between mx-8 mt-8">
|
||||
<a
|
||||
class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg"
|
||||
class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex gap-1 items-center"
|
||||
href={backlink}
|
||||
>
|
||||
Back
|
||||
<IconArrowNarrowLeft class="w-5 h-5" /> Back
|
||||
</a>
|
||||
{editLink &&
|
||||
(
|
||||
<a
|
||||
class={`px-4 py-2 ${
|
||||
imageUrl ? "bg-gray-300 text-gray-800" : "text-gray-200"
|
||||
} rounded-lg flex gap-1 items-center`}
|
||||
href={editLink}
|
||||
>
|
||||
<IconEdit class="w-5 h-5" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class={`inset-x-0 py-4 px-8 ${imageUrl ? "py-8" : ""} `}
|
||||
class={`relative inset-x-0 py-4 px-8 ${imageUrl ? "py-8" : ""} `}
|
||||
>
|
||||
<div
|
||||
class={`${imageUrl ? "noisy-gradient" : ""} flex gap-4 items-center ${
|
||||
@ -69,7 +84,7 @@ export function RecipeHero(
|
||||
{subline?.length &&
|
||||
(
|
||||
<div
|
||||
class="relative z-50 flex gap-5 font-sm text-light mt-3"
|
||||
class={`relative z-50 flex gap-5 font-sm text-light mt-3`}
|
||||
style={{ color: imageUrl ? "#1F1F1F" : "white" }}
|
||||
>
|
||||
{subline.filter((s) => s && s?.length > 1).map((s) => {
|
||||
|
37
components/Youtube.tsx
Normal file
37
components/Youtube.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
export const isYoutubeLink = (link: string) => {
|
||||
try {
|
||||
const url = new URL(link);
|
||||
return ["youtu.be", "youtube.com"].includes(url.hostname);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
function extractYoutubeId(link: string) {
|
||||
const url = new URL(link);
|
||||
if (url.searchParams.has("v")) {
|
||||
const id = url.searchParams.get("v");
|
||||
|
||||
if (id?.length && id.length > 4) {
|
||||
return id;
|
||||
}
|
||||
}
|
||||
|
||||
return url.pathname.replace(/^\//, "");
|
||||
}
|
||||
|
||||
export const YoutubePlayer = ({ link }: { link: string }) => {
|
||||
const id = extractYoutubeId(link);
|
||||
return (
|
||||
<iframe
|
||||
width="100%"
|
||||
height="400px"
|
||||
src={`https://www.youtube-nocookie.com/embed/${id}`}
|
||||
frameBorder="0"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowFullScreen
|
||||
>
|
||||
</iframe>
|
||||
);
|
||||
};
|
@ -1,4 +1,5 @@
|
||||
import { ComponentChildren } from "preact";
|
||||
import { menu } from "@lib/menus.ts";
|
||||
|
||||
export type Props = {
|
||||
children: ComponentChildren;
|
||||
@ -9,25 +10,6 @@ export type Props = {
|
||||
};
|
||||
|
||||
export const MainLayout = ({ children, url }: Props) => {
|
||||
const menu = [
|
||||
{
|
||||
name: "🏡 Home",
|
||||
link: "/",
|
||||
},
|
||||
{
|
||||
name: "🍽️ Recipes",
|
||||
link: "/recipes",
|
||||
},
|
||||
{
|
||||
name: "🍿 Movies",
|
||||
link: "/movies",
|
||||
},
|
||||
{
|
||||
name: "📝 Articles",
|
||||
link: "/articles",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
class="md:grid mx-auto"
|
||||
|
Reference in New Issue
Block a user