nostr web components demo

<nostr-name>

  <script src="https://cdn.jsdelivr.net/npm/nostr-web-components/dist/nostr-name.js"></script>

  hello,
  <nostr-name class="text-2xl text-orange-500" pubkey="nprofile1qqsgfhhxuemwtwm8kjk5uppv7uxtmp5pz4wm2dv59lxx5pfnsk98ysqpz3mhxue69uhkummnw3ezummcw3ezuer9wcq3camnwvaz7tmwdaehgu3wvf5hgcm0d9hx2u3wwdhkx6tpds37vfju"></nostr-name>
hello, npub1sn0…jdv9

<nostr-picture>

  <script src="https://cdn.jsdelivr.net/npm/nostr-web-components/dist/nostr-picture.js"></script>

  <div class="flex gap-2 items-center h-16">
    <nostr-picture pubkey="nprofile1qqsgfhhxuemwtwm8kjk5uppv7uxtmp5pz4wm2dv59lxx5pfnsk98ysqpz3mhxue69uhkummnw3ezummcw3ezuer9wcq3camnwvaz7tmwdaehgu3wvf5hgcm0d9hx2u3wwdhkx6tpds37vfju" class="part-[img]:h-full part-[img]:border-solid part-[img]:border-8 part-[img]:border-rose-600"></nostr-picture>
    <div class="font-mono">
      there should be a picture of snowden here<br>
      &lt;--
    </div>
  </div>
there should be a picture of snowden here
<--

<nostr-follow>

  <script src="https://cdn.jsdelivr.net/npm/nostr-web-components/dist/nostr-follow.js"></script>

  <nostr-follow pubkey="npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6" class="part-[button]:bg-white part-[button]:rounded part-[button]:border-0 part-[button]:drop-shadow part-[button]:p-2 part-[button]:hover:bg-gray-50 part-[button]:cursor-pointer part-[button]:active:shadow-inner part-[button]:hover:bg-gray-100 part-[button]:disabled:cursor-default">
    click here to follow me on nostr
    <span class="text-sky-500" slot="loading">...</span>
    <span class="text-green-500" slot="success">It worked.</span>
    <span class="text-red-500" slot="failure">It went bad: <span part="error-message"></span></span>
  </nostr-follow>
click here to follow me on nostr ... It worked. It went bad:

<nostr-text>

  <script src="https://cdn.jsdelivr.net/npm/nostr-web-components/dist/nostr-text.js"></script>

  <nostr-text class="block p-4 border-4 border-white part-[video]:block part-[audio]:block part-[image]:block part-[image]:rounded part-[reference]:font-semibold part-[reference]:text-black part-[url]:text-blue-600 part-[relay]:text-orange-600" content="this video got 96 views when it was published on January 11, 2013 at https://youtube.com/watch?v=rr7xo8LdGJs:
    https://cdn.nostrcheck.me/1fc19ef347a19e3675231bad2d25d43b878886838386adf128175b778b45ac82.mp4"></nostr-text>

<nostr-user-search>

  <script src="https://cdn.jsdelivr.net/npm/nostr-web-components/dist/nostr-user-search.js"></script>

  <nostr-user-search class="part-[input]:text-xl part-[input]:px-1 part-[input]:py-2 part-[item]:text-xl part-[item]:px-1 part-[item]:py-2 part-[picture]:w-16 part-[picture]:h-16 part-[picture]:border part-[name]:max-w-64"></nostr-user-search>
  <p>you have selected <a id="result" class="font-bold text-rose-500" target="_blank"></a></p>

  <script>
    document.querySelector('nostr-user-search').addEventListener('selected', function (ev) {
      console.log('selected', ev.detail)
      document.querySelector('#result').textContent = ev.detail.metadata.name || ev.detail.npub
      document.querySelector('#result').href = 'https://nostrrr.com/p/' + ev.detail.npub
    })
  </script>

you have selected

<nostr-rsvp>

  <script src="https://cdn.jsdelivr.net/npm/nostr-web-components/dist/nostr-rsvp.js"></script>

  <nostr-rsvp ref="naddr1qqjrys6px56yydpk94prxdes956yxw2r95u5g33s94pnxwpjgg6ygv69xqcrvqgdwaehxw309ahx7uewd3hkcq3q0hj9rg5gds5x2gk0z0s2jlqnq04jg7g30aj2t5pqzdaaztfactgsxpqqqp7tx45kyl4" class="part-[container]:bg-white part-[container]:p-4 part-[container]:pt-2 part-[container]:rounded-lg part-[title]:text-xl part-[title]:font-bold part-[title]:text-center part-[time]:text-gray-600 part-[description]:mt-4 part-[buttons]:mt-4 part-[buttons]:flex part-[buttons]:justify-center part-[buttons]:gap-2 part-[button]:cursor-pointer part-[button]:text-white part-[button]:px-4 part-[button]:py-2 part-[button]:rounded part-[accepted]:bg-green-500 part-[tentative]:bg-yellow-500 part-[declined]:bg-red-500">
    <span slot="declined">Decline</span>
    <span slot="rsvp-sent">Sent!</span>
  </nostr-rsvp>
Decline Sent!

<nostr-livestream>

  <script src="https://cdn.jsdelivr.net/npm/nostr-web-components/dist/nostr-livestream.js"></script>

  <nostr-livestream ref="naddr1qqjr2vehvyenvdtr94nrzetr956rgctr94skvvfs95eryep3x3snwve389nxyqgwwaehxw309ahx7uewd3hkctcpz4mhxue69uhhyetvv9ujuerpd46hxtnfduhszxthwden5te0wfjkccte9eekummjwsh8xmmrd9skctcpzamhxue69uhhyetvv9ujumn0wd68ytnzv9hxgtcpz9mhxue69uhkummnw3ezumrpdejz7qg7waehxw309ahx7um5wgkhqatz9emk2mrvdaexgetj9ehx2ap0qyghwumn8ghj7mn0wd68ytnhd9hx2tcpz4mhxue69uhhyetvv9ujumn0wd68ytnzvuhsz9thwden5te0dehhxarj9ehhsarj9ejx2a30qgsv73dxhgfk8tt76gf6q788zrfyz9dwwgwfk3aar6l5gk82a76v9fgrqsqqqan8tp7le0" class="part-[error]:text-red-500 part-[error]:font-bold part-[header]:flex part-[title]:ml-2 part-[status]:mx-4 part-[status]:p-2 part-[status]:bg-yellow-400 part-[stats]:flex part-[stats]:justify-end">
    <span slot="error-pointer">the code is wrong!</span>
    <span slot="error-fetch">couldn't find the event anywhere!</span>
    <span slot="error-invalid">this is not a livestream!</span>
    <span slot="current">this many people here: <span class="value"></span></span>
    <span slot="stats">
      <div class="flex items-center">
        <span class="text-xl" part="current-value"></span>
        <span class="text-xs">viewers</span>
      </div>
    </span>
  </nostr-livestream>
the code is wrong! couldn't find the event anywhere! this is not a livestream! this many people here:
viewers

<nostr-note>

  <script src="https://cdn.jsdelivr.net/npm/nostr-web-components/dist/nostr-note.js"></script>

  <nostr-note event="{&quot;id&quot;:&quot;b9fead6eef87d8400cbc1a5621600b360438affb9760a6a043cc0bddea21dab6&quot;,&quot;pubkey&quot;:&quot;82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2&quot;,&quot;created_at&quot;:1676161639,&quot;kind&quot;:1,&quot;tags&quot;:[],&quot;content&quot;: &quot;this is going to work&quot;,&quot;sig&quot;:&quot;76d19889a803236165a290fa8f3cf5365af8977ee1e002afcfd37063d1355fc755d0293d27ba0ec1c2468acfaf95b7e950e57df275bb32d7a4a3136f8862d2b7&quot;}" class="part-[container]:mb-4 part-[container]:break-inside-avoid part-[container]:bg-white part-[container]:rounded-lg part-[container]:shadow-md part-[container]:p-4 part-[header]:flex part-[header]:w-full part-[header]:items-center part-[header]:justify-between part-[header]:mb-3 part-[author-link]:no-underline part-[author-link]:text-black part-[author-name]:font-semibold part-[author-npub-short]:hidden part-[parent-link]:text-sm part-[parent-link]:text-gray-800 part-[link]:text-xs part-[link]:text-gray-500 part-[content]:text-gray-700 part-[content]:mb-3 part-[video]:block part-[audio]:block part-[image]:block part-[image]:rounded part-[reference]:font-semibold part-[reference]:text-black part-[url]:text-blue-600 part-[relay]:text-orange-600"></nostr-note>
  <nostr-note ref="nevent1qqsp2fasgxsh4d39htpvu23sanvsd2d3xavxkrvktulzqwczk72xs4qpz9mhxue69uhkummnw3ezuamfdejj7qr6mw8" class="part-[container]:mb-4 part-[container]:break-inside-avoid part-[container]:bg-white part-[container]:rounded-lg part-[container]:shadow-md part-[container]:p-4 part-[header]:flex part-[header]:w-full part-[header]:items-center part-[header]:justify-between part-[header]:mb-3 part-[author-link]:no-underline part-[author-link]:text-black part-[author-name]:font-semibold part-[author-npub-short]:hidden part-[parent-link]:text-sm part-[parent-link]:text-gray-800 part-[link]:text-xs part-[link]:text-gray-500 part-[content]:text-gray-700 part-[content]:mb-3 part-[video]:block part-[audio]:block part-[image]:block part-[image]:rounded part-[reference]:font-semibold part-[reference]:text-black part-[url]:text-blue-600 part-[relay]:text-orange-600"></nostr-note>
  <nostr-note ref="nevent1qqsvmjrqmlfmf0csk8uy43jc52jpsktqyqehtgh326clh0avj25vsscppemhxue69uhkummn9ekx7mp0qyg8wumn8ghj7mn0wd68ytnddakj7qg4waehxw309ahx7um5wghx77r5wghxgetk9uug2ajj" class="part-[container]:mb-4 part-[container]:break-inside-avoid part-[container]:bg-white part-[container]:rounded-lg part-[container]:shadow-md part-[container]:p-4 part-[header]:flex part-[header]:w-full part-[header]:items-center part-[header]:justify-between part-[header]:mb-3 part-[author-link]:no-underline part-[author-link]:text-black part-[author-name]:font-semibold part-[author-npub-short]:hidden part-[parent-link]:text-sm part-[parent-link]:text-gray-800 part-[link]:text-xs part-[link]:text-gray-500 part-[content]:text-gray-700 part-[content]:mb-3 part-[video]:block part-[audio]:block part-[image]:block part-[image]:rounded part-[reference]:font-semibold part-[reference]:text-black part-[url]:text-blue-600 part-[relay]:text-orange-600"></nostr-note>

<nostr-event-json>

  <script src="https://cdn.jsdelivr.net/npm/nostr-web-components/dist/nostr-event-json.js"></script>

  <nostr-event-json ref="nevent1qqstnl4ddmhc0kzqpj7p543pvq9nvppc4laewc9x5ppucz7aagsa4dspzemhxue69uhhyetvv9ujumn0wd68ytnzv9hxgqgewaehxw309ac8junpd45kgtnxd9shg6npvchxxmmdqyv8wumn8ghj7un9d3shjtnndehhyapwwdhkx6tpdsds02v2" class="part-[pre]:rounded-lg part-[pre]:bg-sky-800 part-[pre]:transition-colors hover:part-[pre]:bg-sky-600 part-[pre]:p-4 part-[pre]:text-white part-[key]:text-emerald-200 part-[key]:font-bold part-[kind]:text-xl part-[content]:decoration-italic part-[id]:text-sm part-[pubkey]:text-sm part-[sig]:text-sm"></nostr-event-json>