Class: Views::Docs::Card

Inherits:
Base
  • Object
show all
Defined in:
lib/ruby_ui/card/card_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

#arrow_icon(classes: nil) ⇒ Object 



81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
# File 'lib/ruby_ui/card/card_docs.rb', line 81

def arrow_icon(classes: nil)
  svg(
    xmlns: "http://www.w3.org/2000/svg",
    viewbox: "0 0 20 20",
    fill: "currentColor",
    class: ["w-4 h-4", classes]
  ) do |s|
    s.path(
      fill_rule: "evenodd",
      d:
        "M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z",
      clip_rule: "evenodd"
    )
  end
end

#cash_icon(classes: nil) ⇒ Object 



97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
# File 'lib/ruby_ui/card/card_docs.rb', line 97

def cash_icon(classes: nil)
  svg(
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewbox: "0 0 24 24",
    stroke_width: "1.5",
    stroke: "currentColor",
    class: ["w-6 h-6", classes]
  ) do |s|
    s.path(
      stroke_linecap: "round",
      stroke_linejoin: "round",
      d:
        "M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
    )
  end
end

#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
 
# File 'lib/ruby_ui/card/card_docs.rb', line 4

def view_template
  component = "Card"
  div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
    render Docs::Header.new(title: "Card", description: "Displays a card with header, content, and footer.")

    Heading(level: 2) { "Usage" }

    render Docs::VisualCodeExample.new(title: "Card with image", context: self) do
      "        Card(class: 'w-96') do\n          CardHeader do\n            CardTitle { 'You might like \"RubyUI\"' }\n            CardDescription { \"@joeldrapper\" }\n          end\n          CardContent do\n            AspectRatio(aspect_ratio: \"16/9\", class: \"rounded-md overflow-hidden border\") do\n              img(\n                alt: \"Placeholder\",\n                loading: \"lazy\",\n                src: image_url('pattern.jpg')\n              )\n            end\n          end\n          CardFooter(class: 'flex justify-end gap-x-2') do\n            Button(variant: :outline) { \"See more\" }\n            Button(variant: :primary) { \"Buy now\" }\n          end\n        end\n      RUBY\n    end\n\n    render Docs::VisualCodeExample.new(title: \"Card with full-width image\", context: self) do\n      <<~RUBY\n        Card(class: 'w-96 overflow-hidden') do\n          AspectRatio(aspect_ratio: \"16/9\", class: \"border-b\") do\n            img(\n              alt: \"Placeholder\",\n              loading: \"lazy\",\n              src: image_url('pattern.jpg')\n            )\n          end\n          CardHeader do\n            CardTitle { 'Introducing RubyUI' }\n            CardDescription { \"Kickstart your project today!\" }\n          end\n          CardFooter(class: 'flex justify-end') do\n            Button(variant: :outline) { \"Get started\" }\n          end\n        end\n      RUBY\n    end\n\n    render Docs::VisualCodeExample.new(title: \"Account balance\", context: self) do\n      <<~RUBY\n        Card(class: 'w-96 overflow-hidden') do\n          CardHeader do\n            div(class: 'w-10 h-10 rounded-xl flex items-center justify-center bg-violet-100 text-violet-700 -rotate-6') do\n              cash_icon\n            end\n          end\n          CardContent(class: 'space-y-1') do\n            CardDescription(class: 'font-medium') { \"Current Balance\" }\n            h5(class: 'font-semibold text-4xl') { '$2,602' }\n          end\n          CardFooter do\n            Text(size: \"2\", class: \"text-muted-foreground\") { \"**** 4620\" }\n          end\n        end\n      RUBY\n    end\n\n    render Components::ComponentSetup::Tabs.new(component_name: component)\n\n    render Docs::ComponentsTable.new(component_files(component))\n  end\nend\n"