@upstart.gg/sdk
Version:
You can test the CLI without recompiling by running:
467 lines (465 loc) • 10.1 kB
JavaScript
import { defineBrickManifest } from "../../brick-manifest.js";
import { cssLength } from "../props/css-length.js";
import { defineProps } from "../props/helpers.js";
import { icon } from "../props/string.js";
import { fontSize } from "../props/text.js";
import { colorPreset } from "../props/color-preset.js";
import { border, rounding } from "../props/border.js";
import { direction } from "../props/direction.js";
import { Type } from "@sinclair/typebox";
import { TiSocialFlickr } from "react-icons/ti";
//#region src/shared/bricks/manifests/social-links.manifest.ts
const manifest = defineBrickManifest({
type: "social-links",
name: "Social links",
description: "A list of social media links",
icon: TiSocialFlickr,
defaultWidth: { mobile: "100%" },
props: defineProps({
colorPreset: Type.Optional(colorPreset({ title: "Color" })),
links: Type.Array(Type.Object({
icon: Type.Optional(icon({ "ui:default-icon-collection": "cib" })),
label: Type.Optional(Type.String({ title: "Label" })),
href: Type.String({ title: "Link" })
}), {
title: "Social Links",
description: "List of social media links",
default: [
{
href: "https://facebook.com/company",
label: "Facebook",
icon: "mdi:facebook"
},
{
href: "https://twitter.com/company",
label: "Twitter",
icon: "mdi:twitter"
},
{
href: "https://instagram.com/company",
label: "Instagram",
icon: "mdi:instagram"
}
],
"ui:widget": "array",
"ui:displayField": "label",
"ui:options": {
orderable: true,
removable: true,
addable: true
},
metadata: { category: "content" }
}),
direction: Type.Optional(direction({ default: "flex-row" })),
fontSize: Type.Optional(fontSize()),
padding: Type.Optional(cssLength({
default: "2rem",
description: "Padding.",
"ai:instructions": "Use only a single value like '1rem' or '10px'",
title: "Padding",
"ui:responsive": true,
"ui:placeholder": "Not specified",
"ui:styleId": "styles:padding"
})),
rounding: rounding({ default: "rounded-md" }),
border: Type.Optional(border()),
iconOnly: Type.Optional(Type.Boolean({
title: "Only icons",
description: "If set, the brick will only display the icons without labels."
}))
})
});
const examples = [
{
description: "Social icons displayed horizontally, without labels",
type: "social-links",
props: {
iconOnly: true,
links: [
{
href: "https://facebook.com/company",
label: "Facebook",
icon: "mdi:facebook"
},
{
href: "https://twitter.com/company",
label: "Twitter",
icon: "mdi:twitter"
},
{
href: "https://instagram.com/company",
label: "Instagram",
icon: "mdi:instagram"
}
]
}
},
{
description: "Social icons displayed vertically, without labels",
type: "social-links",
props: {
iconOnly: true,
direction: "flex-col",
links: [
{
href: "https://facebook.com/company",
label: "Facebook",
icon: "mdi:facebook"
},
{
href: "https://twitter.com/company",
label: "Twitter",
icon: "mdi:twitter"
},
{
href: "https://instagram.com/company",
label: "Instagram",
icon: "mdi:instagram"
}
]
}
},
{
description: "Social icons displayed horizontally, with labels",
type: "social-links",
props: {
iconOnly: false,
links: [
{
href: "https://facebook.com/company",
label: "Facebook",
icon: "mdi:facebook"
},
{
href: "https://twitter.com/company",
label: "Twitter",
icon: "mdi:twitter"
},
{
href: "https://instagram.com/company",
label: "Instagram",
icon: "mdi:instagram"
},
{
href: "https://linkedin.com/company/company",
label: "LinkedIn",
icon: "mdi:linkedin"
}
]
}
},
{
description: "Social icons displayed vertically, with labels",
type: "social-links",
props: {
iconOnly: false,
direction: "flex-col",
links: [
{
href: "https://facebook.com/company",
label: "Facebook",
icon: "mdi:facebook"
},
{
href: "https://twitter.com/company",
label: "Twitter",
icon: "mdi:twitter"
},
{
href: "https://instagram.com/company",
label: "Instagram",
icon: "mdi:instagram"
},
{
href: "https://linkedin.com/company/company",
label: "LinkedIn",
icon: "mdi:linkedin"
}
]
}
},
{
description: "Professional social links with labels",
type: "social-links",
props: {
iconOnly: false,
links: [
{
href: "https://linkedin.com/in/johndoe",
label: "Connect on LinkedIn",
icon: "mdi:linkedin"
},
{
href: "https://github.com/johndoe",
label: "View GitHub Profile",
icon: "mdi:github"
},
{
href: "https://twitter.com/johndoe",
label: "Follow on Twitter",
icon: "mdi:twitter"
},
{
href: "mailto:john@example.com",
label: "Send Email",
icon: "mdi:email"
}
]
}
},
{
description: "Creative portfolio social links (icon-only inline)",
type: "social-links",
props: {
iconOnly: true,
links: [
{
href: "https://dribbble.com/designer",
label: "Dribbble",
icon: "mdi:dribbble"
},
{
href: "https://behance.net/designer",
label: "Behance",
icon: "mdi:behance"
},
{
href: "https://instagram.com/designer",
label: "Instagram",
icon: "mdi:instagram"
},
{
href: "https://pinterest.com/designer",
label: "Pinterest",
icon: "mdi:pinterest"
},
{
href: "https://youtube.com/designer",
label: "YouTube",
icon: "mdi:youtube"
}
]
}
},
{
description: "Developer/tech social links with labels",
type: "social-links",
props: {
iconOnly: false,
direction: "flex-col",
links: [
{
href: "https://github.com/developer",
label: "GitHub",
icon: "mdi:github"
},
{
href: "https://stackoverflow.com/users/developer",
label: "Stack Overflow",
icon: "mdi:stack-overflow"
},
{
href: "https://dev.to/developer",
label: "Dev.to",
icon: "mdi:dev-to"
},
{
href: "https://codepen.io/developer",
label: "CodePen",
icon: "mdi:codepen"
}
]
}
},
{
description: "Music artist social platforms (block layout)",
type: "social-links",
props: {
iconOnly: true,
direction: "flex-col",
links: [
{
href: "https://spotify.com/artist/musician",
label: "Listen on Spotify",
icon: "mdi:spotify"
},
{
href: "https://music.apple.com/artist/musician",
label: "Apple Music",
icon: "mdi:apple"
},
{
href: "https://soundcloud.com/musician",
label: "SoundCloud",
icon: "mdi:soundcloud"
},
{
href: "https://youtube.com/musician",
label: "YouTube Channel",
icon: "mdi:youtube"
},
{
href: "https://bandcamp.com/musician",
label: "Bandcamp",
icon: "mdi:bandcamp"
}
]
}
},
{
description: "Business contact icons only",
type: "social-links",
props: {
iconOnly: true,
links: [
{
href: "tel:+1234567890",
label: "Phone",
icon: "mdi:phone"
},
{
href: "mailto:contact@business.com",
label: "Email",
icon: "mdi:email"
},
{
href: "https://maps.google.com/business",
label: "Location",
icon: "mdi:map-marker"
},
{
href: "https://business.com",
label: "Website",
icon: "mdi:web"
}
]
}
},
{
description: "Gaming content creator links (inline with labels)",
type: "social-links",
props: {
iconOnly: false,
links: [
{
href: "https://twitch.tv/gamer",
label: "Twitch",
icon: "mdi:twitch"
},
{
href: "https://youtube.com/gamer",
label: "YouTube",
icon: "mdi:youtube"
},
{
href: "https://discord.gg/gamer",
label: "Discord",
icon: "mdi:discord"
},
{
href: "https://tiktok.com/@gamer",
label: "TikTok",
icon: "mdi:tiktok"
}
]
}
},
{
description: "Restaurant social presence (block layout)",
type: "social-links",
props: {
iconOnly: false,
direction: "flex-col",
links: [
{
href: "https://facebook.com/restaurant",
label: "Follow us on Facebook",
icon: "mdi:facebook"
},
{
href: "https://instagram.com/restaurant",
label: "See photos on Instagram",
icon: "mdi:instagram"
},
{
href: "https://yelp.com/restaurant",
label: "Review us on Yelp",
icon: "mdi:yelp"
},
{
href: "https://tripadvisor.com/restaurant",
label: "TripAdvisor Reviews",
icon: "mdi:tripadvisor"
},
{
href: "tel:+1234567890",
label: "Call for Reservations",
icon: "mdi:phone"
}
]
}
},
{
description: "Minimal footer social icons",
type: "social-links",
props: {
iconOnly: true,
direction: "flex-row",
links: [
{
href: "https://twitter.com/company",
label: "Twitter",
icon: "mdi:twitter"
},
{
href: "https://linkedin.com/company/company",
label: "LinkedIn",
icon: "mdi:linkedin"
},
{
href: "mailto:hello@company.com",
label: "Email",
icon: "mdi:email"
}
]
}
},
{
description: "E-commerce store social channels (inline with labels)",
type: "social-links",
props: {
iconOnly: false,
direction: "flex-row",
links: [
{
href: "https://facebook.com/store",
label: "Facebook",
icon: "mdi:facebook"
},
{
href: "https://instagram.com/store",
label: "Instagram",
icon: "mdi:instagram"
},
{
href: "https://pinterest.com/store",
label: "Pinterest",
icon: "mdi:pinterest"
},
{
href: "https://youtube.com/store",
label: "YouTube",
icon: "mdi:youtube"
},
{
href: "https://tiktok.com/@store",
label: "TikTok",
icon: "mdi:tiktok"
}
]
}
}
];
//#endregion
export { examples, manifest };
//# sourceMappingURL=social-links.manifest.js.map