Add useful components for ui
This commit is contained in:
prototypa
7
src/components/ui/Background.astro
Normal file
7
src/components/ui/Background.astro
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
const { isDark = false } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class:list={["absolute inset-0", { "bg-dark dark:bg-transparent": isDark }]}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
38
src/components/ui/CTA.astro
Normal file
38
src/components/ui/CTA.astro
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
---
|
||||||
|
import { Icon } from "astro-icon/components";
|
||||||
|
import type { CallToAction } from "~/types";
|
||||||
|
|
||||||
|
const { callToAction } = Astro.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
targetBlank,
|
||||||
|
text = "",
|
||||||
|
icon = "",
|
||||||
|
href = "",
|
||||||
|
} = callToAction as CallToAction;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="flex w-auto">
|
||||||
|
{
|
||||||
|
targetBlank ? (
|
||||||
|
<a
|
||||||
|
class="inline-flex items-center justify-center"
|
||||||
|
href={href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
{text}
|
||||||
|
{icon && (
|
||||||
|
<Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:ml-1 rtl:-mr-1.5" />
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<a class="inline-flex items-center justify-center" href={href}>
|
||||||
|
{text}
|
||||||
|
{icon && (
|
||||||
|
<Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:ml-1 rtl:-mr-1.5" />
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
48
src/components/ui/Headline.astro
Normal file
48
src/components/ui/Headline.astro
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
---
|
||||||
|
import type { Headline } from "~/types";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
const {
|
||||||
|
title = await Astro.slots.render("title"),
|
||||||
|
subtitle = await Astro.slots.render("subtitle"),
|
||||||
|
tagline,
|
||||||
|
classes = {},
|
||||||
|
} = Astro.props as Headline;
|
||||||
|
|
||||||
|
const {
|
||||||
|
container: containerClass = "max-w-3xl",
|
||||||
|
title: titleClass = "text-3xl md:text-4xl ",
|
||||||
|
subtitle: subtitleClass = "text-xl",
|
||||||
|
} = classes;
|
||||||
|
---
|
||||||
|
|
||||||
|
{
|
||||||
|
(title || subtitle || tagline) && (
|
||||||
|
<div
|
||||||
|
class={twMerge("mb-8 md:mx-auto md:mb-12 text-center", containerClass)}
|
||||||
|
>
|
||||||
|
{tagline && (
|
||||||
|
<p
|
||||||
|
class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
|
||||||
|
set:html={tagline}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{title && (
|
||||||
|
<h2
|
||||||
|
class={twMerge(
|
||||||
|
"font-bold leading-tighter tracking-tighter font-heading text-heading text-3xl",
|
||||||
|
titleClass
|
||||||
|
)}
|
||||||
|
set:html={title}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{subtitle && (
|
||||||
|
<p
|
||||||
|
class={twMerge("mt-4 text-muted", subtitleClass)}
|
||||||
|
set:html={subtitle}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
100
src/components/ui/ItemGrid.astro
Normal file
100
src/components/ui/ItemGrid.astro
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
---
|
||||||
|
import { Icon } from "astro-icon/components";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
import type { ItemGrid } from "~/types";
|
||||||
|
import CTA from "./CTA.astro";
|
||||||
|
|
||||||
|
const {
|
||||||
|
items = [],
|
||||||
|
columns,
|
||||||
|
defaultIcon = "",
|
||||||
|
classes = {},
|
||||||
|
} = Astro.props as ItemGrid;
|
||||||
|
|
||||||
|
const {
|
||||||
|
container: containerClass = "",
|
||||||
|
// container: containerClass = "md:grid-cols-2",
|
||||||
|
panel: panelClass = "",
|
||||||
|
title: titleClass = "",
|
||||||
|
description: descriptionClass = "",
|
||||||
|
icon: defaultIconClass = "text-primary",
|
||||||
|
} = classes;
|
||||||
|
---
|
||||||
|
|
||||||
|
{
|
||||||
|
items && (
|
||||||
|
<div
|
||||||
|
class={twMerge(
|
||||||
|
`grid mx-auto gap-8 gap-y-12 ${
|
||||||
|
columns === 4
|
||||||
|
? "lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"
|
||||||
|
: columns === 3
|
||||||
|
? "lg:grid-cols-3 sm:grid-cols-2"
|
||||||
|
: columns === 2
|
||||||
|
? "sm:grid-cols-2 "
|
||||||
|
: ""
|
||||||
|
}`,
|
||||||
|
containerClass
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{items.map(
|
||||||
|
({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
icon,
|
||||||
|
callToAction,
|
||||||
|
classes: itemClasses = {},
|
||||||
|
}) => (
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class={twMerge(
|
||||||
|
"flex flex-row max-w-md",
|
||||||
|
panelClass,
|
||||||
|
itemClasses?.panel
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
{(icon || defaultIcon) && (
|
||||||
|
<Icon
|
||||||
|
name={icon || defaultIcon}
|
||||||
|
class={twMerge(
|
||||||
|
"w-7 h-7 mr-2 rtl:mr-0 rtl:ml-2",
|
||||||
|
defaultIconClass,
|
||||||
|
itemClasses?.icon
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3
|
||||||
|
class={twMerge(
|
||||||
|
"text-xl font-bold",
|
||||||
|
titleClass,
|
||||||
|
itemClasses?.title
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
{description && (
|
||||||
|
<p
|
||||||
|
class={twMerge(
|
||||||
|
`${title ? "mt-3" : ""} text-muted`,
|
||||||
|
descriptionClass,
|
||||||
|
itemClasses?.description
|
||||||
|
)}
|
||||||
|
set:html={description}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{callToAction && (
|
||||||
|
<div class="mt-2 text-primary cursor-pointer">
|
||||||
|
<CTA callToAction={callToAction} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
94
src/components/ui/ItemGrid2.astro
Normal file
94
src/components/ui/ItemGrid2.astro
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
---
|
||||||
|
import { Icon } from "astro-icon/components";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
import type { ItemGrid } from "~/types";
|
||||||
|
import CTA from "./CTA.astro";
|
||||||
|
|
||||||
|
const {
|
||||||
|
items = [],
|
||||||
|
columns,
|
||||||
|
defaultIcon = "",
|
||||||
|
classes = {},
|
||||||
|
} = Astro.props as ItemGrid;
|
||||||
|
|
||||||
|
const {
|
||||||
|
container: containerClass = "",
|
||||||
|
// container: containerClass = "sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
|
||||||
|
panel: panelClass = "",
|
||||||
|
title: titleClass = "",
|
||||||
|
description: descriptionClass = "",
|
||||||
|
icon: defaultIconClass = "text-primary",
|
||||||
|
} = classes;
|
||||||
|
---
|
||||||
|
|
||||||
|
{
|
||||||
|
items && (
|
||||||
|
<div
|
||||||
|
class={twMerge(
|
||||||
|
`grid gap-8 gap-x-12 sm:gap-y-8 ${
|
||||||
|
columns === 4
|
||||||
|
? "lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"
|
||||||
|
: columns === 3
|
||||||
|
? "lg:grid-cols-3 sm:grid-cols-2"
|
||||||
|
: columns === 2
|
||||||
|
? "sm:grid-cols-2 "
|
||||||
|
: ""
|
||||||
|
}`,
|
||||||
|
containerClass
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{items.map(
|
||||||
|
({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
icon,
|
||||||
|
callToAction,
|
||||||
|
classes: itemClasses = {},
|
||||||
|
}) => (
|
||||||
|
<div
|
||||||
|
class={twMerge(
|
||||||
|
"relative flex flex-col",
|
||||||
|
panelClass,
|
||||||
|
itemClasses?.panel
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{(icon || defaultIcon) && (
|
||||||
|
<Icon
|
||||||
|
name={icon || defaultIcon}
|
||||||
|
class={twMerge(
|
||||||
|
"mb-2 w-10 h-10",
|
||||||
|
defaultIconClass,
|
||||||
|
itemClasses?.icon
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
class={twMerge(
|
||||||
|
"text-xl font-bold",
|
||||||
|
titleClass,
|
||||||
|
itemClasses?.title
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
{description && (
|
||||||
|
<p
|
||||||
|
class={twMerge(
|
||||||
|
"text-muted mt-2",
|
||||||
|
descriptionClass,
|
||||||
|
itemClasses?.description
|
||||||
|
)}
|
||||||
|
set:html={description}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{callToAction && (
|
||||||
|
<div class="mt-2 text-primary cursor-pointer">
|
||||||
|
<CTA callToAction={callToAction} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
82
src/components/ui/Timeline.astro
Normal file
82
src/components/ui/Timeline.astro
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
---
|
||||||
|
import { Icon } from "astro-icon/components";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
import type { Item } from "~/types";
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
items?: Array<Item>;
|
||||||
|
defaultIcon?: string;
|
||||||
|
classes?: Record<string, string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { items = [], classes = {}, defaultIcon } = Astro.props as Props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
container: containerClass = "",
|
||||||
|
panel: panelClass = "",
|
||||||
|
title: titleClass = "",
|
||||||
|
description: descriptionClass = "",
|
||||||
|
icon: defaultIconClass = "text-primary dark:text-slate-200 border-primary dark:border-blue-700",
|
||||||
|
} = classes;
|
||||||
|
---
|
||||||
|
|
||||||
|
{
|
||||||
|
items && items.length && (
|
||||||
|
<div class={containerClass}>
|
||||||
|
{items.map(
|
||||||
|
(
|
||||||
|
{ title, description, icon, classes: itemClasses = {} },
|
||||||
|
index = 0
|
||||||
|
) => (
|
||||||
|
<div class={twMerge("flex", panelClass, itemClasses?.panel)}>
|
||||||
|
<div class="flex flex-col items-center mr-4">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-center">
|
||||||
|
{(icon || defaultIcon) && (
|
||||||
|
<Icon
|
||||||
|
name={icon || defaultIcon}
|
||||||
|
class={twMerge(
|
||||||
|
"w-10 h-10 p-2 rounded-full border-2",
|
||||||
|
defaultIconClass,
|
||||||
|
itemClasses?.icon
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{index !== items.length - 1 && (
|
||||||
|
<div class="w-px h-full bg-black/10 dark:bg-slate-400/50" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class={`max-w-md pt-1 ${
|
||||||
|
index !== items.length - 1 ? "pb-8" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{title && (
|
||||||
|
<p
|
||||||
|
class={twMerge(
|
||||||
|
"text-xl font-bold",
|
||||||
|
titleClass,
|
||||||
|
itemClasses?.title
|
||||||
|
)}
|
||||||
|
set:html={title}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{description && (
|
||||||
|
<p
|
||||||
|
class={twMerge(
|
||||||
|
"text-muted mt-2",
|
||||||
|
descriptionClass,
|
||||||
|
itemClasses?.description
|
||||||
|
)}
|
||||||
|
set:html={description}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
24
src/components/ui/WidgetWrapper.astro
Normal file
24
src/components/ui/WidgetWrapper.astro
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
---
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
import Background from "./Background.astro";
|
||||||
|
|
||||||
|
const { id, isDark = false, containerClass = "", bg, as = "section" } = Astro.props;
|
||||||
|
|
||||||
|
const WrapperTag = as;
|
||||||
|
---
|
||||||
|
|
||||||
|
<WrapperTag class="relative not-prose" {...id ? { id } : {}}>
|
||||||
|
<div class="absolute inset-0 pointer-events-none -z-[1]" aria-hidden="true">
|
||||||
|
<slot name="bg">
|
||||||
|
{bg ? <Fragment set:html={bg} /> : <Background isDark={isDark} />}
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class:list={[
|
||||||
|
twMerge("relative mx-auto max-w-7xl px-4 md:px-6 py-12 md:py-16 lg:py-20 text-default", containerClass),
|
||||||
|
{ dark: isDark },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</WrapperTag>
|
||||||
Reference in New Issue
Block a user