✨TinaCMS - Create Aside Template Component with Multiple Variants

[JackDevAU]

CC: @bradystroud @adamcogan

Description

Develop an Aside template component in TinaCMS with multiple style variants to support different types of sidebar content. This component should allow content creators to add contextually styled boxes, such as warnings, highlights, and informational notes, to enrich content presentation and improve reader experience.

Acceptance Criteria

• Create an Aside component in TinaCMS that includes the following variants:
  • Good
  • Bad
  • Ok
  • Greybox
  • Warning
  • Info
  • Todo
  • China
  • Codeauditor
  • Highlight
• Ensure each variant has distinct styling to visually differentiate the purpose and type of content (e.g., Warning should have alert colors, Info should have a neutral tone)
• Allow content creators to select the variant type within TinaCMS when adding the Aside component
• Allow rich-text (child) e.g. text, images, or other necessary content
• Test the component to ensure each variant renders correctly on different pages and across common browsers and devices
• Document the Aside component's setup and usage instructions, including descriptions of each variant and its intended use