Class: Views::Docs::Message

Inherits:
Base
  • Object
show all
Defined in:
lib/ruby_ui/message/message_docs.rb

Instance Method Summary collapse

Methods inherited from Base

#Alert, #AlertDescription, #AlertTitle, #Heading, #InlineCode, #InlineLink, #Text, #component_files, #docs_accordion_path, #docs_alert_dialog_path, #docs_alert_path, #docs_aspect_ratio_path, #docs_avatar_path, #docs_badge_path, #docs_installation_path, #docs_separator_path, #docs_sheet_path

Instance Method Details

#view_template ⇒ Object 



4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
 
# File 'lib/ruby_ui/message/message_docs.rb', line 4

def view_template
  component = "Message"

  div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
    render Docs::Header.new(title: "Message", description: "A chat message layout that pairs an avatar with bubbles, headers, and footers. Built on top of Avatar and Bubble.")

    Heading(level: 2) { "Usage" }

    render Docs::VisualCodeExample.new(title: "Conversation", context: self) do
      <<~RUBY
        div(class: "flex flex-col gap-6") do
          Message(align: :end) do
            MessageAvatar do
              Avatar(size: :sm) do
                AvatarImage(src: "https://github.com/joeldrapper.png", alt: "@me")
                AvatarFallback { "ME" }
              end
            end
            MessageContent do
              Bubble do
                BubbleContent { "Deploying to prod real quick." }
              end
            end
          end

          Message do
            MessageAvatar do
              Avatar(size: :sm) do
                AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
                AvatarFallback { "R" }
              end
            end
            MessageContent do
              Bubble(variant: :muted) do
                BubbleContent { "It's 4:55 PM. On a Friday." }
              end
            end
          end

          Message(align: :end) do
            MessageAvatar do
              Avatar(size: :sm) do
                AvatarImage(src: "https://github.com/joeldrapper.png", alt: "@me")
                AvatarFallback { "ME" }
              end
            end
            MessageContent do
              Bubble do
                BubbleContent { "It's a one-line change." }
              end
              MessageFooter { "Delivered" }
            end
          end

          Message do
            MessageAvatar do
              Avatar(size: :sm) do
                AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
                AvatarFallback { "R" }
              end
            end
            MessageContent do
              BubbleGroup do
                Bubble(variant: :muted) do
                  BubbleContent { "It's always a one-line change 😭." }
                end
                Bubble(variant: :muted) do
                  BubbleContent { "Alright, let me take a look." }
                  BubbleReactions(role: "img", aria_label: "Reaction: thumbs up") do
                    span { "👍" }
                  end
                end
              end
            end
          end
        end
      RUBY
    end

    Heading(level: 2) { "With header" }

    render Docs::VisualCodeExample.new(title: "Header and footer", context: self) do
      <<~RUBY
        Message do
          MessageAvatar do
            Avatar(size: :sm) do
              AvatarImage(src: "https://github.com/shadcn.png", alt: "@oliver")
              AvatarFallback { "OL" }
            end
          end
          MessageContent do
            MessageHeader { "Oliver" }
            Bubble(variant: :muted) do
              BubbleContent { "Pushed the fix, can you review?" }
            end
            MessageFooter { "9:41 AM" }
          end
        end
      RUBY
    end

    Heading(level: 2) { "Alignment" }

    render Docs::VisualCodeExample.new(title: "Sender and receiver", context: self) do
      <<~RUBY
        div(class: "flex flex-col gap-6") do
          Message do
            MessageAvatar do
              Avatar(size: :sm) do
                AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
                AvatarFallback { "R" }
              end
            end
            MessageContent do
              Bubble(variant: :muted) { BubbleContent { "Aligned to the start." } }
            end
          end
          Message(align: :end) do
            MessageAvatar do
              Avatar(size: :sm) do
                AvatarImage(src: "https://github.com/joeldrapper.png", alt: "@me")
                AvatarFallback { "ME" }
              end
            end
            MessageContent do
              Bubble { BubbleContent { "Aligned to the end." } }
            end
          end
        end
      RUBY
    end

    Heading(level: 2) { "Group" }

    render Docs::VisualCodeExample.new(title: "Message group", context: self) do
      <<~RUBY
        MessageGroup do
          Message do
            MessageAvatar do
              Avatar(size: :sm) do
                AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
                AvatarFallback { "R" }
              end
            end
            MessageContent do
              Bubble(variant: :muted) { BubbleContent { "First message." } }
            end
          end
          Message do
            MessageAvatar do
              Avatar(size: :sm) do
                AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
                AvatarFallback { "R" }
              end
            end
            MessageContent do
              Bubble(variant: :muted) { BubbleContent { "Second, tighter spacing." } }
            end
          end
        end
      RUBY
    end

    render Components::ComponentSetup::Tabs.new(component_name: component)

    # components
    render Docs::ComponentsTable.new(component_files(component))
  end
end