Midwest Component Library v0.28.2

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
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
<div class="midwest-social-preview-card midwest-social-preview-bluesky">
  <div class="midwest-social-preview-header"><span class="midwest-social-preview-wordmark">Bluesky</span></div>
  <div class="midwest-social-preview-bluesky-body">
    <div class="midwest-social-preview-bluesky-avatar-col">
      <div class="midwest-social-preview-avatar">
        <img src="https://i.pravatar.cc/100?u=jane" alt="Jane Smith">
      </div>
    </div>
    <div class="midwest-social-preview-bluesky-content-col">
      <div class="midwest-social-preview-profile p-0 mb-1">
        <div class="midwest-social-preview-profile-left">
          <div class="midwest-social-preview-bluesky-meta">
            <div class="midwest-social-preview-bluesky-name-row">
              <span class="midwest-social-preview-bluesky-name">Jane Smith</span>
            </div>
            <div class="midwest-social-preview-bluesky-handle-row">
              <span class="midwest-social-preview-bluesky-handle">@janesmith.bsky.social</span>
              <span class="midwest-social-preview-bluesky-sep">ยท</span>
              <span class="midwest-social-preview-bluesky-time">2h</span>
            </div>
          </div>
        </div>
        <div class="midwest-social-preview-profile-right">
          <div class="midwest-icon midwest-social-preview-ellipsis">
            <div class="midwest-icon-inner">
              <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Ellipsis horizontal"><title>Ellipsis horizontal</title>
                <circle cx="256" cy="256" r="48"></circle><circle cx="416" cy="256" r="48"></circle><circle cx="96" cy="256" r="48"></circle></svg>
            </div>
          </div>
        </div>
      </div>
      <div class="midwest-social-preview-body mx-0">
        <p>Excited to share our latest design system update! Building components that scale across platforms.</p>
      </div>
      <div class="midwest-social-preview-bluesky-actions">
        <button type="button" class="midwest-social-preview-bluesky-action" aria-label="Reply">
          <div class="midwest-icon ">
            <div class="midwest-icon-inner">
              <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chatbubble outline"><title>Chatbubble outline</title>
                <path d="M87.49 380c1.19-4.38-1.44-10.47-3.95-14.86a44.86 44.86 0 00-2.54-3.8 199.81 199.81 0 01-33-110C47.65 139.09 140.73 48 255.83 48 356.21 48 440 117.54 459.58 209.85a199 199 0 014.42 41.64c0 112.41-89.49 204.93-204.59 204.93-18.3 0-43-4.6-56.47-8.37s-26.92-8.77-30.39-10.11a31.09 31.09 0 00-11.12-2.07 30.71 30.71 0 00-12.09 2.43l-67.83 24.48a16 16 0 01-4.67 1.22 9.6 9.6 0 01-9.57-9.74 15.85 15.85 0 01.6-3.29z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path></svg>
            </div>
          </div>
          <span>12</span>
        </button>
        <button type="button" class="midwest-social-preview-bluesky-action" aria-label="Repost">
          <div class="midwest-icon ">
            <div class="midwest-icon-inner">
              <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Repeat"><title>Repeat</title>
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 120l48 48-48 48"></path><path d="M352 168H144a80.24 80.24 0 00-80 80v16M192 392l-48-48 48-48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path><path d="M160 344h208a80.24 80.24 0 0080-80v-16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
            </div>
          </div>
          <span>34</span>
        </button>
        <button type="button" class="midwest-social-preview-bluesky-action" aria-label="Like">
          <div class="midwest-icon ">
            <div class="midwest-icon-inner">
              <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Heart outline"><title>Heart outline</title>
                <path d="M352.92 80C288 80 256 144 256 144s-32-64-96.92-64c-52.76 0-94.54 44.14-95.08 96.81-1.1 109.33 86.73 187.08 183 252.42a16 16 0 0018 0c96.26-65.34 184.09-143.09 183-252.42-.54-52.67-42.32-96.81-95.08-96.81z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
            </div>
          </div>
          <span>187</span>
        </button>
        <button type="button" class="midwest-social-preview-bluesky-action" aria-label="Quote">
          <div class="midwest-icon ">
            <div class="midwest-icon-inner">
              <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chatbox outline"><title>Chatbox outline</title>
                <path d="M408 64H104a56.16 56.16 0 00-56 56v192a56.16 56.16 0 0056 56h40v80l93.72-78.14a8 8 0 015.13-1.86H408a56.16 56.16 0 0056-56V120a56.16 56.16 0 00-56-56z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path></svg>
            </div>
          </div>
          <span>5</span>
        </button>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
<%= midwest_social_preview_bluesky(
  name: "Jane Smith",
  handle: "@janesmith.bsky.social",
  content_text: "Excited to share our latest design system update! Building components that scale across platforms.",
  avatar_url: "https://i.pravatar.cc/100?u=jane",
  timestamp: "2h",
  reply_count: 12,
  repost_count: 34,
  likes: 187,
  quote_count: 5
) %>

Bluesky

Bluesky-styled post preview with butterfly logo, side-by-side avatar layout, inline engagement counts, link preview cards, and quote post support.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Social Preview/bluesky

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."