web/app/components/ruby_ui/link/link.rb at 0ddabf43a40cab08bf31552e550e4e3c2674a603 · ruby-ui/web · GitHub

1
2
3
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
# frozen_string_literal: true

module RubyUI
  class Link < Base
    BASE_CLASSES = [
      "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors",
      "disabled:pointer-events-none disabled:opacity-50",
      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
      "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
    ].freeze

    def initialize(href: "#", variant: :link, size: :md, icon: false, **attrs)
      @href = href
      @variant = variant.to_sym
      @size = size.to_sym
      @icon = icon
      super(**attrs)
    end

    def view_template(&)
      a(href: @href, **attrs, &)
    end

    private

    def size_classes
      if @icon
        case @size
        when :sm then "h-6 w-6"
        when :md then "h-9 w-9"
        when :lg then "h-10 w-10"
        when :xl then "h-12 w-12"
        end
      else
        case @size
        when :sm then "px-3 py-1.5 h-8 text-xs"
        when :md then "px-4 py-2 h-9 text-sm"
        when :lg then "px-4 py-2 h-10 text-base"
        when :xl then "px-6 py-3 h-12 text-base"
        end
      end
    end

    def primary_classes
      [
        BASE_CLASSES,
        size_classes,
        "bg-primary text-primary-foreground shadow",
        "hover:bg-primary/90"
      ]
    end

    def link_classes
      [
        BASE_CLASSES,
        size_classes,
        "text-primary underline-offset-4",
        "hover:underline"
      ]
    end

    def secondary_classes
      [
        BASE_CLASSES,
        size_classes,
        "bg-secondary text-secondary-foreground",
        "hover:bg-opacity-80"
      ]
    end

    def destructive_classes
      [
        BASE_CLASSES,
        size_classes,
        "bg-destructive text-white shadow-sm",
        "[a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20",
        "dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
      ]
    end

    def outline_classes
      [
        BASE_CLASSES,
        size_classes,
        "border border-input bg-background shadow-sm",
        "hover:bg-accent hover:text-accent-foreground"
      ]
    end

    def ghost_classes
      [
        BASE_CLASSES,
        size_classes,
        "hover:bg-accent hover:text-accent-foreground"
      ]
    end

    def default_classes
      case @variant
      when :primary then primary_classes
      when :link then link_classes
      when :secondary then secondary_classes
      when :destructive then destructive_classes
      when :outline then outline_classes
      when :ghost then ghost_classes
      end
    end

    def default_attrs
      {type: "button", class: default_classes}
    end
  end
end