@upstart.gg/sdk

import { defineBrickManifest } from "~/shared/brick-manifest"; import { textContent } from "../props/text"; import { defineProps } from "../props/helpers"; import { border, rounding } from "../props/border"; import { RxTextAlignLeft } from "react-icons/rx"; import { Type } from "@sinclair/typebox"; import { alignItems } from "../props/align"; import { shadow } from "../props/effects"; import { cssLength } from "../props/css-length"; import type { BrickExample } from "./_types"; import { backgroundColor } from "../props/background"; import { color } from "../props/color"; export const manifest = defineBrickManifest({ type: "text", category: "basic", name: "Text", description: "Text with formatting options", aiInstructions: `Use the text component for rich content blocks, announcements, descriptions, and formatted text throughout your site. CONTENT FORMATTING: - Supports HTML tags: <h1>, <h2>, <h3>, <h4>, , , , , , <a>, <ul>, <li>, <ol> - Only 'text-align' style is supported (center, left, right) - avoid other inline styles - Use for emphasis, for italics, for line breaks - Links: <a href="/page">Internal</a> or <a href="https://external.com">External</a> - Lists: <ul><li>Item 1</li><li>Item 2</li></ul> STYLING OPTIONS: - "color": Leave empty to inherit parent text color, which is the recommended setting when the brick is a direct child of a section or box with background color. - "backgroundColor": Only use when the text brick is a direct child of a section.Leave empty for transparent background, or set to a color like "bg-xxx-nnn" for emphasis. - "padding": Use CSS values like "1rem", "2rem", "24px" for internal spacing WHEN TO USE: - All text content that requires formatting - Rich content sections (About Us, Service descriptions) - Announcements and notices - Product descriptions with formatting - Quotes and testimonials - FAQ content and detailed explanations BEST PRACTICES: - Keep HTML minimal - complex layouts should use multiple components - Use semantic headings (h2, h3, h4) for proper hierarchy - Center-align for quotes/testimonials, left-align for body text`, defaultWidth: { mobile: "100%", }, defaultHeight: { desktop: "auto", mobile: "auto", }, staticClasses: "prose lg:prose-lg", icon: RxTextAlignLeft, props: defineProps({ backgroundColor: Type.Optional( backgroundColor({ title: "Background color", }), ), color: Type.Optional( color({ title: "Text color", }), ), content: textContent({ title: "Content", // metadata: { // category: "content", // }, }), padding: Type.Optional( cssLength({ default: "2rem", description: "Padding inside the text.", "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()), shadow: Type.Optional(shadow()), }), }); export type Manifest = typeof manifest; export const examples: BrickExample<Manifest>[] = [ { description: "Welcome paragraph with emphasis and padding", type: "text", props: { content: "Welcome to our platform! We're excited to have you here. Our mission is to transform the way you work with cutting-edge technology and <a href='/features'>innovative features</a>.", padding: "2rem", }, }, { description: "Feature list with HTML formatting and smaller padding", type: "text", props: { content: "<h3>Key Features</h3><ul><li>Advanced Analytics - Real-time data insights</li><li>Cloud Integration - Seamless connectivity</li><li>24/7 Support - Always here to help</li></ul>", padding: "1rem", }, }, { description: "Quote block with text styling but no background", type: "text", props: { content: "\"Innovation distinguishes between a leader and a follower.\" - Steve Jobs", padding: "3rem", }, }, { description: "Simple heading with subtle background", type: "text", props: { content: "<h2>About Our Company</h2>We've been serving customers since 2010, building trust through quality products and exceptional service.", }, }, { description: "Team introduction with formatting, no background color", type: "text", props: { content: "Meet Our TeamOur diverse team of experts brings together decades of experience in technology, design, and business strategy. We're passionate about creating solutions that make a real difference.<a href='/team'>Learn more about our team</a> and the values that drive us forward.", padding: "2rem", }, }, { description: "Maintenance notice with neutral background and border", type: "text", props: { content: "Scheduled maintenance will occur on Sunday, March 15th from 2:00 AM to 6:00 AM UTC.During this time, some features may be temporarily unavailable. We apologize for any inconvenience.", padding: "1rem", border: { width: "border", color: "border-neutral-400", }, rounding: "rounded-lg", }, }, { description: "Minimal text with no padding or background", type: "text", props: { content: "This is some minimal text.", padding: "0rem", }, }, { description: "Call-to-action text with secondary background and shadow", type: "text", props: { content: "<h3 style='text-align: center'>Ready to Get Started?</h3>Join thousands of satisfied customers who trust our platform. Sign up today and experience the difference!<a href='/signup'>Create Your Free Account</a>", padding: "2.5rem", rounding: "rounded-xl", shadow: "shadow-md", }, }, { description: "Technical documentation with accent colors and code-like formatting", type: "text", props: { content: "<h4>API Authentication</h4>To authenticate your requests, include your API key in the header:Authorization: Bearer YOUR_API_KEYAll API endpoints require authentication. You can find your API key in the <a href='/dashboard'>dashboard settings</a>.", padding: "1.5rem", rounding: "rounded-md", border: { width: "border-4", color: "border-accent-500", }, }, }, { description: "Success message with primary background and top alignment", type: "text", props: { content: "<h3>✅ Payment Successful!</h3>Thank you for your purchase. Your order #12345 has been confirmed.You will receive an email confirmation shortly at your registered email address.", padding: "2rem", rounding: "rounded-lg", shadow: "shadow-sm", }, }, { description: "Footer information with neutral dark theme and multiple links", type: "text", props: { content: "© 2024 Company Name. All rights reserved.<a href='/privacy'>Privacy Policy</a> | <a href='/terms'>Terms of Service</a> | <a href='/contact'>Contact Us</a>Follow us on social media for the latest updates", padding: "1.5rem", }, }, { description: "Product description with large padding and rounded corners", type: "text", props: { content: "<h2>Premium Wireless Headphones</h2>Experience crystal-clear audio with our latest wireless headphones featuring:<ul><li>Active noise cancellation</li><li>30-hour battery life</li><li>Premium leather comfort</li><li>Hi-res audio certification</li></ul>Perfect for music lovers and professionals alike.", padding: "3rem", rounding: "rounded-2xl", shadow: "shadow-lg", border: { width: "border", color: "border-neutral-300", }, }, }, { description: "Emergency alert with accent background and extra bold formatting", type: "text", props: { content: "<h3 style='text-align: center'>⚠️ URGENT NOTICE</h3>System maintenance is currently in progress.Some services may be temporarily unavailable. We expect full restoration by 4:00 PM EST.For urgent support, please <a href='/emergency-contact'>contact our emergency line</a>.", padding: "2rem", rounding: "rounded-md", border: { width: "border-2", color: "border-accent-600", }, shadow: "shadow-xl", }, }, ];