feat: better layout in a lot of places

This commit is contained in:
2023-08-02 01:58:03 +02:00
parent ff3e7f6667
commit 3cfa2274a8
23 changed files with 208 additions and 110 deletions

View File

@ -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
View 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
View 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>
);
};

View File

@ -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
View 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>
);
};

View File

@ -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"