From 9c69832fe40e0a99be8ee9fc5f88927c5cbbc03b Mon Sep 17 00:00:00 2001 From: guitavano Date: Thu, 28 Dec 2023 13:55:54 -0300 Subject: [PATCH] add link tree --- components/ui/Icon.tsx | 3 +- components/ui/LinkTree.tsx | 261 ++++++++++++++++++++++++++++++++----- static/sprites.svg | 15 ++- static/tailwind.css | 2 +- 4 files changed, 238 insertions(+), 43 deletions(-) diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx index 0184934c..0eb12670 100644 --- a/components/ui/Icon.tsx +++ b/components/ui/Icon.tsx @@ -45,7 +45,8 @@ export type AvailableIcons = | "AlertInfo" | "AlertSuccess" | "AlertWarning" - | "AlertError"; + | "AlertError" + | "share"; interface Props extends JSX.SVGAttributes { /** diff --git a/components/ui/LinkTree.tsx b/components/ui/LinkTree.tsx index db9c7945..08cfe2f7 100644 --- a/components/ui/LinkTree.tsx +++ b/components/ui/LinkTree.tsx @@ -1,76 +1,265 @@ -import Icon from "$store/components/ui/Icon.tsx"; -import type { ImageWidget } from "apps/admin/widgets.ts"; +import { ImageWidget } from "apps/admin/widgets.ts"; import Image from "apps/website/components/Image.tsx"; +import Icon, { AvailableIcons } from "$store/components/ui/Icon.tsx"; +import type { ComponentChildren } from "preact"; + +export interface Props { + header: Header; + links: Links; + social?: Social[]; + background: Background; + footer?: Footer; +} + +export interface Header { + /** @description 150px x 150px image recommended */ + logo?: Logo; + /** @format textarea */ + title?: string; + /** @format textarea */ + description?: string; + /** + * @format color + * @description color to be used in title and description + */ + textColor: string; +} + +export interface Logo { + img?: ImageWidget; + /** @description alternative text */ + alt?: string; + width?: number; + height?: number; + /** @description external link on logo */ + link?: string; +} + +export interface Links { + items?: Link[]; + style: Style; +} export interface Link { + /** @description 20px transparent png recommended */ + icon?: AvailableIcons; label: string; + /** @format textarea */ href: string; } +export interface Style { + /** + * @format color + * @description color to be used in link's text + */ + textColor: string; + gradientColors: Gradient; +} + +export interface Gradient { + /** @description multiple colors will create a gradient effect */ + neutral: Neutral[]; +} + +export interface Neutral { + /** @format color */ + color: string; +} + export interface Social { - label: "Instagram" | "Facebook"; href: string; + label: + | "Instagram" + | "Facebook" + | "Linkedin" + | "WhatsApp" + | "Discord" + | "Tiktok"; + /** @format color */ + iconColor?: string; + /** @description width of the SVG line */ + strokeWidth?: number; } -export interface Props { - title?: string; - description?: string; - links?: Link[]; - bgImage?: ImageWidget; - avatar?: ImageWidget; - social?: Social[]; +export interface Background { + /** @description an image will override any background color */ + image?: ImageWidget; + /** @format color */ + backgroundColor?: string; } -function LinkTree({ - bgImage, - avatar, - title = "", - description = "", - links, - social, -}: Props) { +export interface Footer { + url?: string; + image?: ImageWidget; + /** @description alternative text */ + alt?: string; + width?: number; + height?: number; + text?: string; +} + +function Links(props: Props) { + const { header, background, links, social } = props; + const logo = ( + {header.logo?.alt} + ); + + const maybeLink = header?.logo?.link + ? {logo} + : logo; + + const ColorsNeutralAndHover = { + color: links.style?.textColor, + backgroundImage: `linear-gradient(to right, ${ + links.style?.gradientColors.neutral.map((color) => color.color).join( + ", ", + ) + })`, + }; + return ( -
+
-
- {avatar && } -
- {title} - {description} + {header?.logo?.img && ( +
+ {maybeLink} +
+ )} + + {header?.title && ( +

+ {header?.title} +

+ )} + + {header?.description && ( +

+ {header?.description} +

+ )}
-
+ +
-