fix: translate react props to solid props
This commit is contained in:
parent
8321753573
commit
81aa2da4a6
@ -9,7 +9,7 @@ const variantStyles = {
|
|||||||
secondary:
|
secondary:
|
||||||
"bg-slate-800 font-medium text-white hover:bg-slate-700 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400",
|
"bg-slate-800 font-medium text-white hover:bg-slate-700 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400",
|
||||||
ghost:
|
ghost:
|
||||||
"bg-transparent font-medium text-slate-900 dark:text-slate-400 hover:bg-slate-100 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-300/50 active:bg-slate-200",
|
"bg-transparent font-medium text-slate-900 hover:bg-slate-100 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-300/50 active:bg-slate-200",
|
||||||
};
|
};
|
||||||
|
|
||||||
const sizeStyles = {
|
const sizeStyles = {
|
||||||
|
|||||||
@ -5,22 +5,19 @@ import clsx from "clsx";
|
|||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
note: {
|
note: {
|
||||||
container:
|
container: "bg-violet-50",
|
||||||
"bg-violet-50 dark:bg-violet-800/60 dark:ring-1 dark:ring-violet-300/10",
|
title: "text-violet-900",
|
||||||
title: "text-violet-900 dark:text-violet-400",
|
body: "text-slate-800 [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900",
|
||||||
body: "text-slate-800 [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900 dark:text-slate-300 dark:prose-code:text-slate-300",
|
|
||||||
},
|
},
|
||||||
warning: {
|
warning: {
|
||||||
container:
|
container: "bg-amber-50",
|
||||||
"bg-amber-50 dark:bg-amber-800/60 dark:ring-1 dark:ring-amber-300/10",
|
title: "text-amber-900",
|
||||||
title: "text-amber-900 dark:text-amber-500",
|
body: "text-slate-800 [--tw-prose-underline:var(--color-slate-400)] [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900",
|
||||||
body: "text-slate-800 [--tw-prose-underline:var(--color-slate-400)] [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900 dark:text-slate-300 dark:[--tw-prose-underline:var(--color-slate-700)] dark:prose-code:text-slate-300",
|
|
||||||
},
|
},
|
||||||
question: {
|
question: {
|
||||||
container:
|
container: "bg-amber-50",
|
||||||
"bg-amber-50 dark:bg-amber-800/60 dark:ring-1 dark:ring-amber-300/10",
|
title: "text-amber-900",
|
||||||
title: "text-amber-900 dark:text-amber-500",
|
body: "text-slate-800 [--tw-prose-underline:var(--color-slate-400)] [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900",
|
||||||
body: "text-slate-800 [--tw-prose-underline:var(--color-slate-400)] [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900 dark:text-slate-300 dark:[--tw-prose-underline:var(--color-slate-700)] dark:prose-code:text-slate-300",
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -42,9 +42,7 @@ export function Toggle(props: ToggleProps) {
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span class="ml-2 text-sm text-slate-700 dark:text-slate-300">
|
<span class="ml-2 text-sm text-slate-700">{props.label}</span>
|
||||||
{props.label}
|
|
||||||
</span>
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -31,20 +31,20 @@ function PageLink(props: PageLinkProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div {...cleanProps(props, "dir", "title")}>
|
<div {...cleanProps(props, "dir", "title")}>
|
||||||
<dt class="font-display text-sm font-medium text-slate-900 dark:text-white">
|
<dt class="font-display text-sm font-medium text-slate-900">
|
||||||
{props.dir === "next" ? "Suivant" : "Précédent"}
|
{props.dir === "next" ? "Suivant" : "Précédent"}
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="mt-1">
|
<dd class="mt-1">
|
||||||
<Link
|
<Link
|
||||||
href={props.href}
|
href={props.href}
|
||||||
class={clsx(
|
class={clsx(
|
||||||
"flex items-center gap-x-2 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300",
|
"flex items-center gap-x-2 text-base font-semibold text-slate-500 hover:text-slate-600",
|
||||||
props.dir === "previous" && "flex-row-reverse",
|
props.dir === "previous" && "flex-row-reverse",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<p class="flex flex-col gap-0">
|
<p class="flex flex-col gap-0">
|
||||||
{pageCategory && (
|
{pageCategory && (
|
||||||
<span class="text-violet-600 dark:text-violet-400 text-sm mb-1 leading-3">
|
<span class="text-violet-600 text-sm mb-1 leading-3">
|
||||||
{pageCategory.title}
|
{pageCategory.title}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
@ -89,7 +89,7 @@ export function PrevNextLinks() {
|
|||||||
if (!nextPage && !previousPage) return null;
|
if (!nextPage && !previousPage) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<dl class="mt-12 flex gap-4 border-t border-slate-200 pt-6 dark:border-slate-800">
|
<dl class="mt-12 flex gap-4 border-t border-slate-200 pt-6">
|
||||||
{previousPage && <PageLink dir="previous" {...previousPage} />}
|
{previousPage && <PageLink dir="previous" {...previousPage} />}
|
||||||
{nextPage && <PageLink class="ml-auto text-right" {...nextPage} />}
|
{nextPage && <PageLink class="ml-auto text-right" {...nextPage} />}
|
||||||
</dl>
|
</dl>
|
||||||
|
|||||||
@ -16,19 +16,17 @@ export function Prose(props: ProseProps) {
|
|||||||
component={Component}
|
component={Component}
|
||||||
class={clsx(
|
class={clsx(
|
||||||
props.class,
|
props.class,
|
||||||
"prose max-w-none prose-slate dark:text-slate-400 dark:prose-invert",
|
"prose max-w-none prose-slate",
|
||||||
// headings
|
// headings
|
||||||
"prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]",
|
"prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]",
|
||||||
// lead
|
// lead
|
||||||
"prose-lead:text-slate-500 dark:prose-lead:text-slate-400",
|
"prose-lead:text-slate-500",
|
||||||
// links
|
// links
|
||||||
"prose-a:font-semibold dark:prose-a:text-violet-400",
|
"prose-a:font-semibold",
|
||||||
// link underline
|
// link underline
|
||||||
"dark:[--tw-prose-background:var(--color-slate-900)] prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,var(--color-violet-300))] prose-a:hover:[--tw-prose-underline-size:6px] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-violet-800))] dark:prose-a:hover:[--tw-prose-underline-size:6px]",
|
"prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,var(--color-violet-300))] prose-a:hover:[--tw-prose-underline-size:6px]",
|
||||||
// pre
|
// pre
|
||||||
"prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:ring-1 dark:prose-pre:shadow-none dark:prose-pre:ring-slate-300/10",
|
"prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg",
|
||||||
// hr
|
|
||||||
"dark:prose-hr:border-slate-800",
|
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -25,21 +25,19 @@ type QuickLinkProps = {
|
|||||||
|
|
||||||
export function QuickLink(props: QuickLinkProps) {
|
export function QuickLink(props: QuickLinkProps) {
|
||||||
return (
|
return (
|
||||||
<div class="group relative rounded-xl border border-slate-200 dark:border-slate-800">
|
<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 dark:[--quick-links-hover-bg:var(--color-slate-800)]" />
|
<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">
|
<div class="relative overflow-hidden rounded-xl p-6">
|
||||||
<Icon icon={props.icon} class="h-8 w-8" />
|
<Icon icon={props.icon} class="h-8 w-8" />
|
||||||
|
|
||||||
<h2 class="mt-4 font-display text-base text-slate-900 dark:text-white">
|
<h2 class="mt-4 font-display text-base text-slate-900">
|
||||||
<Link href={props.href}>
|
<Link href={props.href}>
|
||||||
<span class="absolute -inset-px rounded-xl" />
|
<span class="absolute -inset-px rounded-xl" />
|
||||||
{props.title}
|
{props.title}
|
||||||
</Link>
|
</Link>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
|
<p class="mt-1 text-sm text-slate-700">{props.description}</p>
|
||||||
{props.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,39 +1,43 @@
|
|||||||
import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
|
import type { IconColor } from "@/components/Icon";
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
export function LightbulbIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
|
import { Gradient } from "@/components/Icon";
|
||||||
return (
|
|
||||||
<>
|
type GradientProps = {
|
||||||
<defs>
|
id: string;
|
||||||
<Gradient id={`${id}-gradient`} color={color} gradientTransform="matrix(0 21 -21 0 20 11)" />
|
color?: IconColor;
|
||||||
<Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 24.5001 -19.2498 0 16 5.5)" />
|
};
|
||||||
</defs>
|
|
||||||
<LightMode>
|
export function LightbulbIcon(props: GradientProps) {
|
||||||
<circle cx={20} cy={20} r={12} fill={`url(#${id}-gradient)`} />
|
return (
|
||||||
<path
|
<>
|
||||||
fillRule="evenodd"
|
<defs>
|
||||||
clipRule="evenodd"
|
<Gradient
|
||||||
d="M20 24.995c0-1.855 1.094-3.501 2.427-4.792C24.61 18.087 26 15.07 26 12.231 26 7.133 21.523 3 16 3S6 7.133 6 12.23c0 2.84 1.389 5.857 3.573 7.973C10.906 21.494 12 23.14 12 24.995V27a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.005Z"
|
id={`${props.id}-gradient`}
|
||||||
className="fill-[var(--icon-background)]"
|
color={props.color}
|
||||||
fillOpacity={0.5}
|
gradientTransform="matrix(0 21 -21 0 20 11)"
|
||||||
/>
|
/>
|
||||||
<path
|
<Gradient
|
||||||
d="M25 12.23c0 2.536-1.254 5.303-3.269 7.255l1.391 1.436c2.354-2.28 3.878-5.547 3.878-8.69h-2ZM16 4c5.047 0 9 3.759 9 8.23h2C27 6.508 21.998 2 16 2v2Zm-9 8.23C7 7.76 10.953 4 16 4V2C10.002 2 5 6.507 5 12.23h2Zm3.269 7.255C8.254 17.533 7 14.766 7 12.23H5c0 3.143 1.523 6.41 3.877 8.69l1.392-1.436ZM13 27v-2.005h-2V27h2Zm1 1a1 1 0 0 1-1-1h-2a3 3 0 0 0 3 3v-2Zm4 0h-4v2h4v-2Zm1-1a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2Zm0-2.005V27h2v-2.005h-2ZM8.877 20.921C10.132 22.136 11 23.538 11 24.995h2c0-2.253-1.32-4.143-2.731-5.51L8.877 20.92Zm12.854-1.436C20.32 20.852 19 22.742 19 24.995h2c0-1.457.869-2.859 2.122-4.074l-1.391-1.436Z"
|
id={`${props.id}-gradient-dark`}
|
||||||
className="fill-[var(--icon-foreground)]"
|
color={props.color}
|
||||||
/>
|
gradientTransform="matrix(0 24.5001 -19.2498 0 16 5.5)"
|
||||||
<path
|
/>
|
||||||
d="M20 26a1 1 0 1 0 0-2v2Zm-8-2a1 1 0 1 0 0 2v-2Zm2 0h-2v2h2v-2Zm1 1V13.5h-2V25h2Zm-5-11.5v1h2v-1h-2Zm3.5 4.5h5v-2h-5v2Zm8.5-3.5v-1h-2v1h2ZM20 24h-2v2h2v-2Zm-2 0h-4v2h4v-2Zm-1-10.5V25h2V13.5h-2Zm2.5-2.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2ZM18.5 18a3.5 3.5 0 0 0 3.5-3.5h-2a1.5 1.5 0 0 1-1.5 1.5v2ZM10 14.5a3.5 3.5 0 0 0 3.5 3.5v-2a1.5 1.5 0 0 1-1.5-1.5h-2Zm2.5-3.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2Z"
|
</defs>
|
||||||
className="fill-[var(--icon-foreground)]"
|
<circle cx={20} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
|
||||||
/>
|
<path
|
||||||
</LightMode>
|
fill-rule="evenodd"
|
||||||
<DarkMode>
|
clip-rule="evenodd"
|
||||||
<path
|
d="M20 24.995c0-1.855 1.094-3.501 2.427-4.792C24.61 18.087 26 15.07 26 12.231 26 7.133 21.523 3 16 3S6 7.133 6 12.23c0 2.84 1.389 5.857 3.573 7.973C10.906 21.494 12 23.14 12 24.995V27a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.005Z"
|
||||||
fillRule="evenodd"
|
class="fill-[var(--icon-background)]"
|
||||||
clipRule="evenodd"
|
fill-opacity={0.5}
|
||||||
d="M16 2C10.002 2 5 6.507 5 12.23c0 3.144 1.523 6.411 3.877 8.691.75.727 1.363 1.52 1.734 2.353.185.415.574.726 1.028.726H12a1 1 0 0 0 1-1v-4.5a.5.5 0 0 0-.5-.5A3.5 3.5 0 0 1 9 14.5V14a3 3 0 1 1 6 0v9a1 1 0 1 0 2 0v-9a3 3 0 1 1 6 0v.5a3.5 3.5 0 0 1-3.5 3.5.5.5 0 0 0-.5.5V23a1 1 0 0 0 1 1h.36c.455 0 .844-.311 1.03-.726.37-.833.982-1.626 1.732-2.353 2.354-2.28 3.878-5.547 3.878-8.69C27 6.507 21.998 2 16 2Zm5 25a1 1 0 0 0-1-1h-8a1 1 0 0 0-1 1 3 3 0 0 0 3 3h4a3 3 0 0 0 3-3Zm-8-13v1.5a.5.5 0 0 1-.5.5 1.5 1.5 0 0 1-1.5-1.5V14a1 1 0 1 1 2 0Zm6.5 2a.5.5 0 0 1-.5-.5V14a1 1 0 1 1 2 0v.5a1.5 1.5 0 0 1-1.5 1.5Z"
|
/>
|
||||||
fill={`url(#${id}-gradient-dark)`}
|
<path
|
||||||
/>
|
d="M25 12.23c0 2.536-1.254 5.303-3.269 7.255l1.391 1.436c2.354-2.28 3.878-5.547 3.878-8.69h-2ZM16 4c5.047 0 9 3.759 9 8.23h2C27 6.508 21.998 2 16 2v2Zm-9 8.23C7 7.76 10.953 4 16 4V2C10.002 2 5 6.507 5 12.23h2Zm3.269 7.255C8.254 17.533 7 14.766 7 12.23H5c0 3.143 1.523 6.41 3.877 8.69l1.392-1.436ZM13 27v-2.005h-2V27h2Zm1 1a1 1 0 0 1-1-1h-2a3 3 0 0 0 3 3v-2Zm4 0h-4v2h4v-2Zm1-1a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2Zm0-2.005V27h2v-2.005h-2ZM8.877 20.921C10.132 22.136 11 23.538 11 24.995h2c0-2.253-1.32-4.143-2.731-5.51L8.877 20.92Zm12.854-1.436C20.32 20.852 19 22.742 19 24.995h2c0-1.457.869-2.859 2.122-4.074l-1.391-1.436Z"
|
||||||
</DarkMode>
|
class="fill-[var(--icon-foreground)]"
|
||||||
</>
|
/>
|
||||||
);
|
<path
|
||||||
|
d="M20 26a1 1 0 1 0 0-2v2Zm-8-2a1 1 0 1 0 0 2v-2Zm2 0h-2v2h2v-2Zm1 1V13.5h-2V25h2Zm-5-11.5v1h2v-1h-2Zm3.5 4.5h5v-2h-5v2Zm8.5-3.5v-1h-2v1h2ZM20 24h-2v2h2v-2Zm-2 0h-4v2h4v-2Zm-1-10.5V25h2V13.5h-2Zm2.5-2.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2ZM18.5 18a3.5 3.5 0 0 0 3.5-3.5h-2a1.5 1.5 0 0 1-1.5 1.5v2ZM10 14.5a3.5 3.5 0 0 0 3.5 3.5v-2a1.5 1.5 0 0 1-1.5-1.5h-2Zm2.5-3.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2Z"
|
||||||
|
class="fill-[var(--icon-foreground)]"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,48 +1,57 @@
|
|||||||
import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
|
import type { IconColor } from "@/components/Icon";
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
export function PluginsIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
|
import { Gradient } from "@/components/Icon";
|
||||||
return (
|
|
||||||
<>
|
type GradientProps = {
|
||||||
<defs>
|
id: string;
|
||||||
<Gradient id={`${id}-gradient`} color={color} gradientTransform="matrix(0 21 -21 0 20 11)" />
|
color?: IconColor;
|
||||||
<Gradient id={`${id}-gradient-dark-1`} color={color} gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)" />
|
};
|
||||||
<Gradient id={`${id}-gradient-dark-2`} color={color} gradientTransform="matrix(0 14 -14 0 16 10)" />
|
|
||||||
</defs>
|
export function PluginsIcon(props: GradientProps) {
|
||||||
<LightMode>
|
return (
|
||||||
<circle cx={20} cy={20} r={12} fill={`url(#${id}-gradient)`} />
|
<>
|
||||||
<g
|
<defs>
|
||||||
fillOpacity={0.5}
|
<Gradient
|
||||||
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
id={`${props.id}-gradient`}
|
||||||
strokeWidth={2}
|
color={props.color}
|
||||||
strokeLinecap="round"
|
gradientTransform="matrix(0 21 -21 0 20 11)"
|
||||||
strokeLinejoin="round"
|
/>
|
||||||
>
|
<Gradient
|
||||||
<path d="M3 9v14l12 6V15L3 9Z" />
|
id={`${props.id}-gradient-dark-1`}
|
||||||
<path d="M27 9v14l-12 6V15l12-6Z" />
|
color={props.color}
|
||||||
</g>
|
gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)"
|
||||||
<path d="M11 4h8v2l6 3-10 6L5 9l6-3V4Z" fillOpacity={0.5} className="fill-[var(--icon-background)]" />
|
/>
|
||||||
<g
|
<Gradient
|
||||||
className="stroke-[color:var(--icon-foreground)]"
|
id={`${props.id}-gradient-dark-2`}
|
||||||
strokeWidth={2}
|
color={props.color}
|
||||||
strokeLinecap="round"
|
gradientTransform="matrix(0 14 -14 0 16 10)"
|
||||||
strokeLinejoin="round"
|
/>
|
||||||
>
|
</defs>
|
||||||
<path d="M20 5.5 27 9l-12 6L3 9l7-3.5" />
|
<circle cx={20} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
|
||||||
<path d="M20 5c0 1.105-2.239 2-5 2s-5-.895-5-2m10 0c0-1.105-2.239-2-5-2s-5 .895-5 2m10 0v3c0 1.105-2.239 2-5 2s-5-.895-5-2V5" />
|
<g
|
||||||
</g>
|
fill-opacity={0.5}
|
||||||
</LightMode>
|
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
||||||
<DarkMode strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
|
stroke-width={2}
|
||||||
<path
|
stroke-linecap="round"
|
||||||
d="M17.676 3.38a3.887 3.887 0 0 0-3.352 0l-9 4.288C3.907 8.342 3 9.806 3 11.416v9.168c0 1.61.907 3.073 2.324 3.748l9 4.288a3.887 3.887 0 0 0 3.352 0l9-4.288C28.093 23.657 29 22.194 29 20.584v-9.168c0-1.61-.907-3.074-2.324-3.748l-9-4.288Z"
|
stroke-linejoin="round"
|
||||||
stroke={`url(#${id}-gradient-dark-1)`}
|
>
|
||||||
/>
|
<path d="M3 9v14l12 6V15L3 9Z" />
|
||||||
<path
|
<path d="M27 9v14l-12 6V15l12-6Z" />
|
||||||
d="M16.406 8.087a.989.989 0 0 0-.812 0l-7 3.598A1.012 1.012 0 0 0 8 12.61v6.78c0 .4.233.762.594.925l7 3.598a.989.989 0 0 0 .812 0l7-3.598c.361-.163.594-.525.594-.925v-6.78c0-.4-.233-.762-.594-.925l-7-3.598Z"
|
</g>
|
||||||
fill={`url(#${id}-gradient-dark-2)`}
|
<path
|
||||||
stroke={`url(#${id}-gradient-dark-2)`}
|
d="M11 4h8v2l6 3-10 6L5 9l6-3V4Z"
|
||||||
/>
|
fill-opacity={0.5}
|
||||||
</DarkMode>
|
class="fill-[var(--icon-background)]"
|
||||||
</>
|
/>
|
||||||
);
|
<g
|
||||||
|
class="stroke-[color:var(--icon-foreground)]"
|
||||||
|
stroke-width={2}
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M20 5.5 27 9l-12 6L3 9l7-3.5" />
|
||||||
|
<path d="M20 5c0 1.105-2.239 2-5 2s-5-.895-5-2m10 0c0-1.105-2.239-2-5-2s-5 .895-5 2m10 0v3c0 1.105-2.239 2-5 2s-5-.895-5-2V5" />
|
||||||
|
</g>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,36 +1,40 @@
|
|||||||
import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
|
import type { IconColor } from "@/components/Icon";
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
export function PresetsIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
|
import { Gradient } from "@/components/Icon";
|
||||||
return (
|
|
||||||
<>
|
type GradientProps = {
|
||||||
<defs>
|
id: string;
|
||||||
<Gradient id={`${id}-gradient`} color={color} gradientTransform="matrix(0 21 -21 0 20 3)" />
|
color?: IconColor;
|
||||||
<Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)" />
|
};
|
||||||
</defs>
|
|
||||||
<LightMode>
|
export function PresetsIcon(props: GradientProps) {
|
||||||
<circle cx={20} cy={12} r={12} fill={`url(#${id}-gradient)`} />
|
return (
|
||||||
<g
|
<>
|
||||||
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
<defs>
|
||||||
fillOpacity={0.5}
|
<Gradient
|
||||||
strokeWidth={2}
|
id={`${props.id}-gradient`}
|
||||||
strokeLinecap="round"
|
color={props.color}
|
||||||
strokeLinejoin="round"
|
gradientTransform="matrix(0 21 -21 0 20 3)"
|
||||||
>
|
/>
|
||||||
<path d="M3 5v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z" />
|
<Gradient
|
||||||
<path d="M18 17v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V17a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2Z" />
|
id={`${props.id}-gradient-dark`}
|
||||||
<path d="M18 5v4a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2Z" />
|
color={props.color}
|
||||||
<path d="M3 25v2a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z" />
|
gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)"
|
||||||
</g>
|
/>
|
||||||
</LightMode>
|
</defs>
|
||||||
<DarkMode fill={`url(#${id}-gradient-dark)`}>
|
<circle cx={20} cy={12} r={12} fill={`url(#${props.id}-gradient)`} />
|
||||||
<path
|
<g
|
||||||
fillRule="evenodd"
|
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
||||||
clipRule="evenodd"
|
fill-opacity={0.5}
|
||||||
d="M3 17V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Zm16 10v-9a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2Zm0-23v5a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-8a1 1 0 0 0-1 1ZM3 28v-3a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z"
|
stroke-width={2}
|
||||||
/>
|
stroke-linecap="round"
|
||||||
<path d="M2 4v13h2V4H2Zm2-2a2 2 0 0 0-2 2h2V2Zm8 0H4v2h8V2Zm2 2a2 2 0 0 0-2-2v2h2Zm0 13V4h-2v13h2Zm-2 2a2 2 0 0 0 2-2h-2v2Zm-8 0h8v-2H4v2Zm-2-2a2 2 0 0 0 2 2v-2H2Zm16 1v9h2v-9h-2Zm3-3a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1v-2Zm6 0h-6v2h6v-2Zm3 3a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2Zm0 9v-9h-2v9h2Zm-3 3a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2Zm-6 0h6v-2h-6v2Zm-3-3a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1h-2Zm2-18V4h-2v5h2Zm0 0h-2a2 2 0 0 0 2 2V9Zm8 0h-8v2h8V9Zm0 0v2a2 2 0 0 0 2-2h-2Zm0-5v5h2V4h-2Zm0 0h2a2 2 0 0 0-2-2v2Zm-8 0h8V2h-8v2Zm0 0V2a2 2 0 0 0-2 2h2ZM2 25v3h2v-3H2Zm2-2a2 2 0 0 0-2 2h2v-2Zm9 0H4v2h9v-2Zm2 2a2 2 0 0 0-2-2v2h2Zm0 3v-3h-2v3h2Zm-2 2a2 2 0 0 0 2-2h-2v2Zm-9 0h9v-2H4v2Zm-2-2a2 2 0 0 0 2 2v-2H2Z" />
|
stroke-linejoin="round"
|
||||||
</DarkMode>
|
>
|
||||||
</>
|
<path d="M3 5v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z" />
|
||||||
);
|
<path d="M18 17v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V17a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2Z" />
|
||||||
|
<path d="M18 5v4a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2Z" />
|
||||||
|
<path d="M3 25v2a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z" />
|
||||||
|
</g>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,48 +1,52 @@
|
|||||||
import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
|
import type { IconColor } from "@/components/Icon";
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
export function QuestionIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
|
import { Gradient } from "@/components/Icon";
|
||||||
return (
|
|
||||||
<>
|
type GradientProps = {
|
||||||
<defs>
|
id: string;
|
||||||
<Gradient id={`${id}-gradient`} color={color} gradientTransform="rotate(65.924 1.519 20.92) scale(25.7391)" />
|
color?: IconColor;
|
||||||
<Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)" />
|
};
|
||||||
</defs>
|
|
||||||
<LightMode>
|
export function QuestionIcon(props: GradientProps) {
|
||||||
<circle cx={20} cy={20} r={12} fill={`url(#${id}-gradient)`} />
|
return (
|
||||||
<path
|
<>
|
||||||
d="M3 16c0 7.18 5.82 13 13 13s13-5.82 13-13S23.18 3 16 3 3 8.82 3 16Z"
|
<defs>
|
||||||
fillOpacity={0.5}
|
<Gradient
|
||||||
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
id={`${props.id}-gradient`}
|
||||||
strokeWidth={2}
|
color={props.color}
|
||||||
strokeLinecap="round"
|
gradientTransform="rotate(65.924 1.519 20.92) scale(25.7391)"
|
||||||
strokeLinejoin="round"
|
/>
|
||||||
/>
|
<Gradient
|
||||||
<path
|
id={`${props.id}-gradient-dark`}
|
||||||
d="m 16.39 14.617 l 1.179 -3.999 C 17.38 9.304 16.133 9.127 15.469 10.645 C 15.306 11.269 14.71 11.12 14.71 10.537 a 1.66 1.66 5 1 1 3.808 0.217 l -1.5182 5.4314 a 0.602 0.602 5 0 1 -1.1795 -0.1032 Z"
|
color={props.color}
|
||||||
className="fill-[var(--icon-foreground)] stroke-[color:var(--icon-foreground)]"
|
gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)"
|
||||||
strokeWidth={2}
|
/>
|
||||||
strokeLinecap="round"
|
</defs>
|
||||||
strokeLinejoin="round"
|
<circle cx={20} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
|
||||||
/>
|
<path
|
||||||
<path
|
d="M3 16c0 7.18 5.82 13 13 13s13-5.82 13-13S23.18 3 16 3 3 8.82 3 16Z"
|
||||||
d="M16 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
fill-opacity={0.5}
|
||||||
fillOpacity={0.5}
|
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
||||||
stroke="currentColor"
|
stroke-width={2}
|
||||||
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
stroke-linecap="round"
|
||||||
strokeWidth={2}
|
stroke-linejoin="round"
|
||||||
strokeLinecap="round"
|
/>
|
||||||
strokeLinejoin="round"
|
<path
|
||||||
/>
|
d="m 16.39 14.617 l 1.179 -3.999 C 17.38 9.304 16.133 9.127 15.469 10.645 C 15.306 11.269 14.71 11.12 14.71 10.537 a 1.66 1.66 5 1 1 3.808 0.217 l -1.5182 5.4314 a 0.602 0.602 5 0 1 -1.1795 -0.1032 Z"
|
||||||
</LightMode>
|
class="fill-[var(--icon-foreground)] stroke-[color:var(--icon-foreground)]"
|
||||||
<DarkMode>
|
stroke-width={2}
|
||||||
<path
|
stroke-linecap="round"
|
||||||
fillRule="evenodd"
|
stroke-linejoin="round"
|
||||||
clipRule="evenodd"
|
/>
|
||||||
d="M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14-6.268 14-14 14S2 23.732 2 16Zm11.386-4.85a2.66 2.66 0 1 1 5.228 0l-1.039 5.543a1.602 1.602 0 0 1-3.15 0l-1.04-5.543ZM16 20a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
|
<path
|
||||||
fill={`url(#${id}-gradient-dark)`}
|
d="M16 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||||
/>
|
fill-opacity={0.5}
|
||||||
</DarkMode>
|
stroke="currentColor"
|
||||||
</>
|
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
||||||
);
|
stroke-width={2}
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,52 +1,56 @@
|
|||||||
import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
|
import type { IconColor } from "@/components/Icon";
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
export function ThemingIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
|
import { Gradient } from "@/components/Icon";
|
||||||
return (
|
|
||||||
<>
|
type GradientProps = {
|
||||||
<defs>
|
id: string;
|
||||||
<Gradient id={`${id}-gradient`} color={color} gradientTransform="matrix(0 21 -21 0 12 11)" />
|
color?: IconColor;
|
||||||
<Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)" />
|
};
|
||||||
</defs>
|
|
||||||
<LightMode>
|
export function ThemingIcon(props: GradientProps) {
|
||||||
<circle cx={12} cy={20} r={12} fill={`url(#${id}-gradient)`} />
|
return (
|
||||||
<path
|
<>
|
||||||
d="M27 12.13 19.87 5 13 11.87v14.26l14-14Z"
|
<defs>
|
||||||
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
<Gradient
|
||||||
fillOpacity={0.5}
|
id={`${props.id}-gradient`}
|
||||||
strokeWidth={2}
|
color={props.color}
|
||||||
strokeLinecap="round"
|
gradientTransform="matrix(0 21 -21 0 12 11)"
|
||||||
strokeLinejoin="round"
|
/>
|
||||||
/>
|
<Gradient
|
||||||
<path
|
id={`${props.id}-gradient-dark`}
|
||||||
d="M3 3h10v22a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V3Z"
|
color={props.color}
|
||||||
className="fill-[var(--icon-background)]"
|
gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)"
|
||||||
fillOpacity={0.5}
|
/>
|
||||||
/>
|
</defs>
|
||||||
<path
|
<circle cx={12} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
|
||||||
d="M3 9v16a4 4 0 0 0 4 4h2a4 4 0 0 0 4-4V9M3 9V3h10v6M3 9h10M3 15h10M3 21h10"
|
<path
|
||||||
className="stroke-[color:var(--icon-foreground)]"
|
d="M27 12.13 19.87 5 13 11.87v14.26l14-14Z"
|
||||||
strokeWidth={2}
|
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
||||||
strokeLinecap="round"
|
fill-opacity={0.5}
|
||||||
strokeLinejoin="round"
|
stroke-width={2}
|
||||||
/>
|
stroke-linecap="round"
|
||||||
<path
|
stroke-linejoin="round"
|
||||||
d="M29 29V19h-8.5L13 26c0 1.5-2.5 3-5 3h21Z"
|
/>
|
||||||
fillOpacity={0.5}
|
<path
|
||||||
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
d="M3 3h10v22a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V3Z"
|
||||||
strokeWidth={2}
|
class="fill-[var(--icon-background)]"
|
||||||
strokeLinecap="round"
|
fill-opacity={0.5}
|
||||||
strokeLinejoin="round"
|
/>
|
||||||
/>
|
<path
|
||||||
</LightMode>
|
d="M3 9v16a4 4 0 0 0 4 4h2a4 4 0 0 0 4-4V9M3 9V3h10v6M3 9h10M3 15h10M3 21h10"
|
||||||
<DarkMode>
|
class="stroke-[color:var(--icon-foreground)]"
|
||||||
<path
|
stroke-width={2}
|
||||||
fillRule="evenodd"
|
stroke-linecap="round"
|
||||||
clipRule="evenodd"
|
stroke-linejoin="round"
|
||||||
d="M3 2a1 1 0 0 0-1 1v21a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H3Zm16.752 3.293a1 1 0 0 0-1.593.244l-1.045 2A1 1 0 0 0 17 8v13a1 1 0 0 0 1.71.705l7.999-8.045a1 1 0 0 0-.002-1.412l-6.955-6.955ZM26 18a1 1 0 0 0-.707.293l-10 10A1 1 0 0 0 16 30h13a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1h-3ZM5 18a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H5Zm-1-5a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm1-7a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2H5Z"
|
/>
|
||||||
fill={`url(#${id}-gradient-dark)`}
|
<path
|
||||||
/>
|
d="M29 29V19h-8.5L13 26c0 1.5-2.5 3-5 3h21Z"
|
||||||
</DarkMode>
|
fill-opacity={0.5}
|
||||||
</>
|
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
||||||
);
|
stroke-width={2}
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,48 +1,52 @@
|
|||||||
import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
|
import type { IconColor } from "@/components/Icon";
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
export function WarningIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
|
import { Gradient } from "@/components/Icon";
|
||||||
return (
|
|
||||||
<>
|
type GradientProps = {
|
||||||
<defs>
|
id: string;
|
||||||
<Gradient id={`${id}-gradient`} color={color} gradientTransform="rotate(65.924 1.519 20.92) scale(25.7391)" />
|
color?: IconColor;
|
||||||
<Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)" />
|
};
|
||||||
</defs>
|
|
||||||
<LightMode>
|
export function WarningIcon(props: GradientProps) {
|
||||||
<circle cx={20} cy={20} r={12} fill={`url(#${id}-gradient)`} />
|
return (
|
||||||
<path
|
<>
|
||||||
d="M3 16c0 7.18 5.82 13 13 13s13-5.82 13-13S23.18 3 16 3 3 8.82 3 16Z"
|
<defs>
|
||||||
fillOpacity={0.5}
|
<Gradient
|
||||||
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
id={`${props.id}-gradient`}
|
||||||
strokeWidth={2}
|
color={props.color}
|
||||||
strokeLinecap="round"
|
gradientTransform="rotate(65.924 1.519 20.92) scale(25.7391)"
|
||||||
strokeLinejoin="round"
|
/>
|
||||||
/>
|
<Gradient
|
||||||
<path
|
id={`${props.id}-gradient-dark`}
|
||||||
d="m15.408 16.509-1.04-5.543a1.66 1.66 0 1 1 3.263 0l-1.039 5.543a.602.602 0 0 1-1.184 0Z"
|
color={props.color}
|
||||||
className="fill-[var(--icon-foreground)] stroke-[color:var(--icon-foreground)]"
|
gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)"
|
||||||
strokeWidth={2}
|
/>
|
||||||
strokeLinecap="round"
|
</defs>
|
||||||
strokeLinejoin="round"
|
<circle cx={20} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
|
||||||
/>
|
<path
|
||||||
<path
|
d="M3 16c0 7.18 5.82 13 13 13s13-5.82 13-13S23.18 3 16 3 3 8.82 3 16Z"
|
||||||
d="M16 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
fill-opacity={0.5}
|
||||||
fillOpacity={0.5}
|
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
||||||
stroke="currentColor"
|
stroke-width={2}
|
||||||
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
stroke-linecap="round"
|
||||||
strokeWidth={2}
|
stroke-linejoin="round"
|
||||||
strokeLinecap="round"
|
/>
|
||||||
strokeLinejoin="round"
|
<path
|
||||||
/>
|
d="m15.408 16.509-1.04-5.543a1.66 1.66 0 1 1 3.263 0l-1.039 5.543a.602.602 0 0 1-1.184 0Z"
|
||||||
</LightMode>
|
class="fill-[var(--icon-foreground)] stroke-[color:var(--icon-foreground)]"
|
||||||
<DarkMode>
|
stroke-width={2}
|
||||||
<path
|
stroke-linecap="round"
|
||||||
fillRule="evenodd"
|
stroke-linejoin="round"
|
||||||
clipRule="evenodd"
|
/>
|
||||||
d="M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14-6.268 14-14 14S2 23.732 2 16Zm11.386-4.85a2.66 2.66 0 1 1 5.228 0l-1.039 5.543a1.602 1.602 0 0 1-3.15 0l-1.04-5.543ZM16 20a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
|
<path
|
||||||
fill={`url(#${id}-gradient-dark)`}
|
d="M16 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||||
/>
|
fill-opacity={0.5}
|
||||||
</DarkMode>
|
stroke="currentColor"
|
||||||
</>
|
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
|
||||||
);
|
stroke-width={2}
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,33 +7,31 @@ import { collectSections } from "@/libs/sections";
|
|||||||
import { navigation } from "@/libs/navigation";
|
import { navigation } from "@/libs/navigation";
|
||||||
import { Prose } from "@/components/Prose";
|
import { Prose } from "@/components/Prose";
|
||||||
|
|
||||||
export function DocsLayout({
|
type DocsLayoutProps = {
|
||||||
children,
|
|
||||||
frontmatter: { title },
|
|
||||||
estimatedReadingTime,
|
|
||||||
nodes,
|
|
||||||
}: {
|
|
||||||
children: JSXElement;
|
children: JSXElement;
|
||||||
frontmatter: { title?: string };
|
title?: string;
|
||||||
|
// frontmatter: { title?: string };
|
||||||
estimatedReadingTime?: string;
|
estimatedReadingTime?: string;
|
||||||
nodes: Array<Node>;
|
// nodes: Array<Node>;
|
||||||
}) {
|
};
|
||||||
const tableOfContents = collectSections(nodes);
|
|
||||||
|
export function DocsLayout(props: DocsLayoutProps) {
|
||||||
|
// const tableOfContents = collectSections(nodes);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow">
|
<div class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow">
|
||||||
<article>
|
<article>
|
||||||
<DocsHeader
|
<DocsHeader
|
||||||
title={title}
|
title={props.title}
|
||||||
estimatedReadingTime={estimatedReadingTime}
|
estimatedReadingTime={props.estimatedReadingTime}
|
||||||
/>
|
/>
|
||||||
<Prose>{children}</Prose>
|
<Prose>{props.children}</Prose>
|
||||||
</article>
|
</article>
|
||||||
<PrevNextLinks />
|
<PrevNextLinks />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<TableOfContents tableOfContents={tableOfContents} />
|
{/* <TableOfContents tableOfContents={tableOfContents} /> */}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -62,12 +60,12 @@ export function DocsHeader(props: DocsHeaderProps) {
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{props.title && (
|
{props.title && (
|
||||||
<h1 class="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
|
<h1 class="font-display text-3xl tracking-tight text-slate-900">
|
||||||
{props.title}
|
{props.title}
|
||||||
</h1>
|
</h1>
|
||||||
)}
|
)}
|
||||||
{/* {props.estimatedReadingTime && (
|
{/* {props.estimatedReadingTime && (
|
||||||
<p class="text-sm text-slate-500 dark:text-slate-400 inline-flex items-center gap-1">
|
<p class="text-sm text-slate-500 inline-flex items-center gap-1">
|
||||||
<ClockIcon class="w-4" /> {props.estimatedReadingTime}
|
<ClockIcon class="w-4" /> {props.estimatedReadingTime}
|
||||||
</p>
|
</p>
|
||||||
)} */}
|
)} */}
|
||||||
|
|||||||
@ -15,6 +15,7 @@ import clsx from "clsx";
|
|||||||
|
|
||||||
// import "./style.css";
|
// import "./style.css";
|
||||||
import "./tailwind.css";
|
import "./tailwind.css";
|
||||||
|
import { DocsLayout } from "./DocsLayout";
|
||||||
// import "./prism.css";
|
// import "./prism.css";
|
||||||
// import "unfonts.css";
|
// import "unfonts.css";
|
||||||
|
|
||||||
@ -49,10 +50,7 @@ function Header() {
|
|||||||
return (
|
return (
|
||||||
<header
|
<header
|
||||||
class={clsx(
|
class={clsx(
|
||||||
"sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 sm:px-6 lg:px-8 dark:shadow-none",
|
"sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 sm:px-6 lg:px-8",
|
||||||
isScrolled()
|
|
||||||
? "dark:bg-slate-900/95 dark:backdrop-blur-sm dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75"
|
|
||||||
: "dark:bg-transparent",
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div class="mr-6 flex lg:hidden">
|
<div class="mr-6 flex lg:hidden">
|
||||||
@ -62,15 +60,15 @@ function Header() {
|
|||||||
<div class="relative flex grow basis-0 items-center">
|
<div class="relative flex grow basis-0 items-center">
|
||||||
<Link href="/" aria-label="Home page" class="flex items-center gap-2">
|
<Link href="/" aria-label="Home page" class="flex items-center gap-2">
|
||||||
<Logo class="h-9 w-auto" />
|
<Logo class="h-9 w-auto" />
|
||||||
<span class="hidden lg:inline text-2xl font-bold -tracking-tight text-slate-900 dark:text-slate-50">
|
<span class="hidden lg:inline text-2xl font-bold -tracking-tight text-slate-900">
|
||||||
Memento Dev
|
Memento Dev
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="-my-5 mr-6 sm:mr-8 md:mr-0">
|
<div class="-my-5 mr-6 sm:mr-8 md:mr-0">
|
||||||
{/* <Search fallback={<div class="h-6 w-6 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700" />} /> */}
|
{/* <Search fallback={<div class="h-6 w-6 animate-pulse rounded-full bg-slate-200" />} /> */}
|
||||||
<div class="h-6 w-6 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700" />
|
<div class="h-6 w-6 animate-pulse rounded-full bg-slate-200" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="relative flex basis-0 justify-end gap-6 sm:gap-8 md:grow">
|
<div class="relative flex basis-0 justify-end gap-6 sm:gap-8 md:grow">
|
||||||
@ -79,7 +77,7 @@ function Header() {
|
|||||||
class="group"
|
class="group"
|
||||||
aria-label="GitHub"
|
aria-label="GitHub"
|
||||||
>
|
>
|
||||||
<GitHubIcon class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
|
<GitHubIcon class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500" />
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@ -88,7 +86,7 @@ function Header() {
|
|||||||
|
|
||||||
function Footer() {
|
function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer class="bg-slate-50 dark:bg-slate-950 text-slate-700 dark:text-slate-200">
|
<footer class="bg-slate-50 text-slate-700">
|
||||||
<div class="mx-auto w-full flex flex-col max-w-8xl sm:px-2 lg:px-8 xl:px-12 py-8">
|
<div class="mx-auto w-full flex flex-col max-w-8xl sm:px-2 lg:px-8 xl:px-12 py-8">
|
||||||
<section>
|
<section>
|
||||||
<header class="flex items-center gap-2 mb-2">
|
<header class="flex items-center gap-2 mb-2">
|
||||||
@ -103,7 +101,7 @@ function Footer() {
|
|||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr class="my-6 border-slate-200 dark:border-slate-600" />
|
<hr class="my-6 border-slate-200" />
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<header class="flex items-center gap-2">
|
<header class="flex items-center gap-2">
|
||||||
@ -113,7 +111,7 @@ function Footer() {
|
|||||||
</h2>
|
</h2>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<p class="text-sm text-slate-500 dark:text-slate-400">
|
<p class="text-sm text-slate-500">
|
||||||
Memento Dev est une plateforme open-source, développée par{" "}
|
Memento Dev est une plateforme open-source, développée par{" "}
|
||||||
<Link href="https://gauthierdaniels.fr" class="font-bold">
|
<Link href="https://gauthierdaniels.fr" class="font-bold">
|
||||||
Gauthier Daniels
|
Gauthier Daniels
|
||||||
@ -144,14 +142,14 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
|
|||||||
|
|
||||||
<div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
|
<div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
|
||||||
<div class="hidden lg:relative lg:block lg:flex-none">
|
<div class="hidden lg:relative lg:block lg:flex-none">
|
||||||
<div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
|
<div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50" />
|
||||||
<div class="absolute top-16 right-0 bottom-0 hidden h-12 w-px bg-linear-to-t from-slate-800 dark:block" />
|
<div class="absolute top-16 right-0 bottom-0 hidden h-12 w-px bg-linear-to-t from-slate-800" />
|
||||||
<div class="absolute top-28 right-0 bottom-0 hidden w-px bg-slate-800 dark:block" />
|
<div class="absolute top-28 right-0 bottom-0 hidden w-px bg-slate-800" />
|
||||||
<div class="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-x-hidden overflow-y-auto py-16 pr-8 pl-0.5 xl:w-72 xl:pr-16">
|
<div class="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-x-hidden overflow-y-auto py-16 pr-8 pl-0.5 xl:w-72 xl:pr-16">
|
||||||
<Navigation />
|
<Navigation />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{props.children}
|
<DocsLayout>{props.children}</DocsLayout>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|||||||
@ -1,18 +1,25 @@
|
|||||||
import type { Config } from "vike/types";
|
import type { Config } from "vike/types";
|
||||||
|
|
||||||
|
import Layout from "@/layouts/LayoutDefault";
|
||||||
import vikeSolid from "vike-solid/config";
|
import vikeSolid from "vike-solid/config";
|
||||||
import Layout from "../layouts/LayoutDefault.js";
|
|
||||||
|
|
||||||
// Default config (can be overridden by pages)
|
// Default config (can be overridden by pages)
|
||||||
// https://vike.dev/config
|
// https://vike.dev/config
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
// https://vike.dev/Layout
|
// https://vike.dev/Layout
|
||||||
|
// @ts-ignore
|
||||||
Layout,
|
Layout,
|
||||||
|
|
||||||
// https://vike.dev/head-tags
|
// https://vike.dev/head-tags
|
||||||
title: "My Vike App",
|
title: "My Vike App",
|
||||||
description: "Demo showcasing Vike",
|
description: "Demo showcasing Vike",
|
||||||
|
htmlAttributes: {
|
||||||
|
class: "h-full antialiased",
|
||||||
|
},
|
||||||
|
bodyAttributes: {
|
||||||
|
class: "flex min-h-full bg-white dark:bg-slate-900",
|
||||||
|
},
|
||||||
|
|
||||||
prerender: true,
|
prerender: true,
|
||||||
|
|
||||||
|
|||||||
@ -70,7 +70,7 @@ export function MobileNavigation() {
|
|||||||
class="fixed inset-0 z-50 flex items-start overflow-y-auto bg-slate-900/50 pr-10 backdrop-blur-sm lg:hidden"
|
class="fixed inset-0 z-50 flex items-start overflow-y-auto bg-slate-900/50 pr-10 backdrop-blur-sm lg:hidden"
|
||||||
aria-label="Navigation"
|
aria-label="Navigation"
|
||||||
>
|
>
|
||||||
<DialogPanel class="min-h-full w-full max-w-xs bg-white px-4 pt-5 pb-12 sm:px-6 dark:bg-slate-900">
|
<DialogPanel class="min-h-full w-full max-w-xs bg-white px-4 pt-5 pb-12 sm:px-6">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@ -27,9 +27,7 @@ function NavigationItem(props: NavigationItemProps) {
|
|||||||
<h2
|
<h2
|
||||||
class={clsx(
|
class={clsx(
|
||||||
"font-display font-medium cursor-pointer",
|
"font-display font-medium cursor-pointer",
|
||||||
isOpened()
|
isOpened() ? "text-violet-600" : "text-slate-900",
|
||||||
? "text-violet-600 dark:text-violet-200"
|
|
||||||
: "text-slate-900 dark:text-white ",
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
@ -54,14 +52,11 @@ function NavigationItem(props: NavigationItemProps) {
|
|||||||
|
|
||||||
{props.section.title}
|
{props.section.title}
|
||||||
|
|
||||||
<span class="text-slate-400 dark:text-slate-500">
|
<span class="text-slate-400"> ({props.section.links.length})</span>
|
||||||
{" "}
|
|
||||||
({props.section.links.length})
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
</h2>
|
</h2>
|
||||||
{isOpened() && (
|
{isOpened() && (
|
||||||
<ul class="!mt-0 ml-2 space-y-1 border-l-2 border-slate-100 lg:mt-4 lg:space-y-2 lg:border-slate-200 dark:border-slate-800 mb-4">
|
<ul class="!mt-0 ml-2 space-y-1 border-l-2 border-slate-100 lg:mt-4 lg:space-y-2 lg:border-slate-200">
|
||||||
<For each={props.section.links}>
|
<For each={props.section.links}>
|
||||||
{(link) => (
|
{(link) => (
|
||||||
<li class="relative">
|
<li class="relative">
|
||||||
@ -139,20 +134,17 @@ function NavigationSubItem(props: NavigationSubItemProps) {
|
|||||||
props.link.href !== urlPathname && "before:hidden",
|
props.link.href !== urlPathname && "before:hidden",
|
||||||
isOpened()
|
isOpened()
|
||||||
? "text-violet-500 before:bg-violet-500"
|
? "text-violet-500 before:bg-violet-500"
|
||||||
: "text-slate-500 before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300",
|
: "text-slate-500 before:bg-slate-300 hover:text-slate-600 hover:before:block",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{props.link.title}
|
{props.link.title}
|
||||||
{props.link.subitems.length > 0 && (
|
{props.link.subitems.length > 0 && (
|
||||||
<span class="text-slate-400 dark:text-slate-500">
|
<span class="text-slate-400"> ({props.link.subitems.length})</span>
|
||||||
{" "}
|
|
||||||
({props.link.subitems.length})
|
|
||||||
</span>
|
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
</span>
|
</span>
|
||||||
{props.link.subitems.length > 0 && isOpened() && (
|
{props.link.subitems.length > 0 && isOpened() && (
|
||||||
<ul class="ml-4 border-l-2 border-slate-100 space-y-1 lg:space-y-2 lg:border-slate-200 dark:border-slate-800 mb-4">
|
<ul class="ml-4 border-l-2 border-slate-100 space-y-1 lg:space-y-2 lg:border-slate-200 mb-4">
|
||||||
<For each={props.link.subitems}>
|
<For each={props.link.subitems}>
|
||||||
{(subitem) => (
|
{(subitem) => (
|
||||||
<li class="relative">
|
<li class="relative">
|
||||||
@ -163,7 +155,7 @@ function NavigationSubItem(props: NavigationSubItemProps) {
|
|||||||
"block w-full pl-3.5 before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full",
|
"block w-full pl-3.5 before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full",
|
||||||
subitem.href === urlPathname
|
subitem.href === urlPathname
|
||||||
? "font-semibold text-violet-500 before:bg-violet-500"
|
? "font-semibold text-violet-500 before:bg-violet-500"
|
||||||
: "text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300",
|
: "text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{subitem.title}
|
{subitem.title}
|
||||||
@ -208,7 +200,7 @@ export function Navigation(props: {
|
|||||||
<nav class={clsx("text-base lg:text-sm", props.class)}>
|
<nav class={clsx("text-base lg:text-sm", props.class)}>
|
||||||
<ul class="space-y-4">
|
<ul class="space-y-4">
|
||||||
<li>
|
<li>
|
||||||
<h2 class="font-display font-bold text-base text-slate-900 dark:text-white">
|
<h2 class="font-display font-bold text-base text-slate-900">
|
||||||
{firstSections[0]?.type}
|
{firstSections[0]?.type}
|
||||||
</h2>
|
</h2>
|
||||||
<For each={firstSections}>
|
<For each={firstSections}>
|
||||||
@ -224,7 +216,7 @@ export function Navigation(props: {
|
|||||||
<For each={Object.entries(filteredSections)}>
|
<For each={Object.entries(filteredSections)}>
|
||||||
{([type, sections]) => (
|
{([type, sections]) => (
|
||||||
<li>
|
<li>
|
||||||
<h2 class="font-display font-bold text-base text-slate-900 dark:text-white">
|
<h2 class="font-display font-bold text-base text-slate-900">
|
||||||
{type}
|
{type}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
@ -241,7 +233,7 @@ export function Navigation(props: {
|
|||||||
</For>
|
</For>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<h2 class="font-display font-bold text-base text-slate-900 dark:text-white">
|
<h2 class="font-display font-bold text-base text-slate-900">
|
||||||
{lastSections[0]?.type}
|
{lastSections[0]?.type}
|
||||||
</h2>
|
</h2>
|
||||||
<For each={lastSections}>
|
<For each={lastSections}>
|
||||||
|
|||||||
@ -65,7 +65,7 @@ export function TableOfContents(props: TableOfContentsProps) {
|
|||||||
<>
|
<>
|
||||||
<h2
|
<h2
|
||||||
id="on-this-page-title"
|
id="on-this-page-title"
|
||||||
class="font-display text-sm font-medium text-slate-900 dark:text-white"
|
class="font-display text-sm font-medium text-slate-900"
|
||||||
>
|
>
|
||||||
Table des matières
|
Table des matières
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user