Class: Shadcn::TypographyComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/shadcn/typography_component.rb

Overview

Typography component for consistent text styling Matches shadcn/ui Typography component

Examples:

Heading 1

<%= render Shadcn::TypographyComponent.new(variant: :h1) { "Heading 1" } %>

Heading 2

<%= render Shadcn::TypographyComponent.new(variant: :h2) { "Heading 2" } %>

Paragraph

<%= render Shadcn::TypographyComponent.new(variant: :p) { "This is a paragraph of text." } %>

Lead text

<%= render Shadcn::TypographyComponent.new(variant: :lead) { "A modal dialog that interrupts the user." } %>

Muted text

<%= render Shadcn::TypographyComponent.new(variant: :muted) { "Enter your email address." } %>

Blockquote

<%= render Shadcn::TypographyComponent.new(variant: :blockquote) { "After all, everyone enjoys a good quote." } %>

Inline code

<%= render Shadcn::TypographyComponent.new(variant: :code) { "@radix-ui/react-alert-dialog" } %>

Constant Summary collapse

VARIANTS = 
{
  h1: {
    tag: :h1,
    classes: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
  },
  h2: {
    tag: :h2,
    classes: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0"
  },
  h3: {
    tag: :h3,
    classes: "scroll-m-20 text-2xl font-semibold tracking-tight"
  },
  h4: {
    tag: :h4,
    classes: "scroll-m-20 text-xl font-semibold tracking-tight"
  },
  p: {
    tag: :p,
    classes: "leading-7 [&:not(:first-child)]:mt-6"
  },
  lead: {
    tag: :p,
    classes: "text-xl text-muted-foreground"
  },
  large: {
    tag: :div,
    classes: "text-lg font-semibold"
  },
  small: {
    tag: :small,
    classes: "text-sm font-medium leading-none"
  },
  muted: {
    tag: :p,
    classes: "text-sm text-muted-foreground"
  },
  blockquote: {
    tag: :blockquote,
    classes: "mt-6 border-l-2 pl-6 italic"
  },
  code: {
    tag: :code,
    classes: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
  },
  list: {
    tag: :ul,
    classes: "my-6 ml-6 list-disc [&>li]:mt-2"
  }
}.freeze

Instance Attribute Summary

Attributes inherited from BaseComponent

#class_name, #data, #html_options

Instance Method Summary collapse

Methods inherited from BaseComponent

#content

Methods included from Rails::Helpers::ClassNameHelper

#cn

Constructor Details

#initialize(variant: :p, tag: nil, **options) ⇒ TypographyComponent

Returns a new instance of TypographyComponent.

Parameters:

  • variant (Symbol) (defaults to: :p) —

    Typography variant (:h1, :h2, :h3, :h4, :p, :lead, :large, :small, :muted, :blockquote, :code, :list)

  • tag (Symbol, nil) (defaults to: nil) —

    Override the default HTML tag



82
83
84
85
86
 
# File 'app/components/shadcn/typography_component.rb', line 82

def initialize(variant: :p, tag: nil, **options)
  super(**options)
  @variant = variant.to_sym
  @tag = tag
end

Instance Method Details

#call ⇒ Object 



88
89
90
 
# File 'app/components/shadcn/typography_component.rb', line 88

def call
  content_tag(element_tag, content, **typography_attributes)
end