GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add QuickLink component to QuickLinks

Browse Source
This commit is contained in:
Gauthier Daniels 2025-04-20 15:43:19 +02:00
parent 4b731fa898
commit 0f2cc8ad59
3 changed files with 31 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/components/QuickLink.tsx
View File

@ -1,31 +0,0 @@
import type { IconProps } from "./Icon";
import { Icon } from "./Icon";
import { Link } from "./Link";
type QuickLinkProps = {
title: string;
description: string;
href: string;
icon: IconProps["icon"];
};
export default function QuickLink(props: QuickLinkProps) {
return (
<div class="group relative rounded-xl border border-slate-200">
<div class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-violet-50)),var(--quick-links-hover-bg,var(--color-violet-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-violet-500))_border-box] group-hover:opacity-100" />
<div class="relative overflow-hidden rounded-xl p-6">
<Icon icon={props.icon} color="blue" class="h-8 w-8" />
<h2 class="mt-4 font-display text-base text-slate-900">
<Link href={props.href}>
<span class="absolute -inset-px rounded-xl" />
{props.title}
</Link>
</h2>
<p class="mt-1 text-sm text-slate-700">{props.description}</p>
</div>
</div>
);
}

29
app/components/QuickLinks.tsx
View File

@ -1,4 +1,8 @@
import type { JSXElement } from "solid-js";
import type { IconProps } from "./Icon";
import { Icon } from "./Icon";
import { Link } from "./Link";
type QuickLinksProps = {
children: JSXElement;
@ -11,3 +15,28 @@ export default function QuickLinks(props: QuickLinksProps) {
</div>
);
}
type QuickLinkProps = {
title: string;
description: string;
href: string;
icon: IconProps["icon"];
};
QuickLinks.QuickLink = (props: QuickLinkProps) => (
<div class="group relative rounded-xl border border-slate-200">
<div class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-violet-50)),var(--quick-links-hover-bg,var(--color-violet-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-violet-500))_border-box] group-hover:opacity-100" />
<div class="relative overflow-hidden rounded-xl p-6">
<Icon icon={props.icon} color="blue" class="h-8 w-8" />
<h2 class="mt-4 font-display text-base text-slate-900">
<Link href={props.href}>
<span class="absolute -inset-px rounded-xl" />
{props.title}
</Link>
</h2>
<p class="mt-1 text-sm text-slate-700">{props.description}</p>
</div>
</div>
);

5
app/pages/docs/+Page.mdx
View File

@ -5,12 +5,11 @@ tags: []
---
import QuickLinks from "@/components/QuickLinks";
import QuickLink from "@/components/QuickLink";
## Documentations rédigées
<QuickLinks>
<QuickLink
<QuickLinks.QuickLink
title="React"
description="Introduction et synthèse de la bibliothèque React"
href="/docs/react"
@ -21,7 +20,7 @@ import QuickLink from "@/components/QuickLink";
## Documentations en cours de rédaction
<QuickLinks>
<QuickLink
<QuickLinks.QuickLink
title="Merise"
description="Introduction et synthèse de la méthode Merise"
href="/docs/merise"