VelvetKit

Previews

No matching results.

x
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
<div class="max-w-sm">
  <div class="rounded-xl border bg-card text-card-foreground shadow">
    <div class="flex flex-col gap-1.5 p-6">
      <h3 class="text-lg font-semibold leading-none tracking-tight">Team Members</h3>
      <p class="text-sm text-muted-foreground">Manage your team and permissions.</p>
    </div>
    <div class="p-6 pt-0 first:pt-6">      
      <div class="space-y-3">
        <div class="flex items-center gap-3">
          <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-medium text-primary">JD</div>
          <div>
            <p class="text-sm font-medium">John Doe</p>
            <p class="text-xs text-muted-foreground">Admin</p>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-medium text-primary">AS</div>
          <div>
            <p class="text-sm font-medium">Alice Smith</p>
            <p class="text-xs text-muted-foreground">Editor</p>
          </div>
        </div>
      </div>
    </div>
    <div class="flex items-center p-6 pt-0">      
      <div class="flex gap-2 w-full">
        <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-input! h-8 rounded-md px-3 text-xs disabled:cursor-not-allowed w-full" aria-busy="false">Invite Member</button>
      </div>
    </div>
  </div>
</div>
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
<div class="max-w-sm">
  <%= render(UI::Card.new) do |card| %>
    <% card.with_header do |header| %>
      <% header.with_title { "Team Members" } %>
      <% header.with_description { "Manage your team and permissions." } %>
    <% end %>
    <% card.with_content do %>
      <div class="space-y-3">
        <div class="flex items-center gap-3">
          <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-medium text-primary">JD</div>
          <div>
            <p class="text-sm font-medium">John Doe</p>
            <p class="text-xs text-muted-foreground">Admin</p>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-medium text-primary">AS</div>
          <div>
            <p class="text-sm font-medium">Alice Smith</p>
            <p class="text-xs text-muted-foreground">Editor</p>
          </div>
        </div>
      </div>
    <% end %>
    <% card.with_footer do %>
      <div class="flex gap-2 w-full">
        <%= render(UI::Button.new(variant: :outline, size: :sm, class: "w-full")) { "Invite Member" } %>
      </div>
    <% end %>
  <% end %>
</div>

No notes provided.

No params configured.