12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <script>
- export let emojis = [
- ...[...Array(50).keys()].map(i => ({
- id: `${i}`,
- url:
- "https://pbs.twimg.com/profile_images/1094633303196487687/AJ5HL3Tz_400x400.png",
- name: "asd"
- }))
- ];
- export let name = "";
- let selectedEmoji = "";
- function emojiSelected(e) {
- selectedEmoji = e.target.dataset.emojiId;
- }
- </script>
- <style>
- div.emoji-selector {
- @apply .flex .flex-wrap .bg-gray-800 .py-1 .px-1 .rounded .border .border-gray-900 w-1/3;
- &:focus {
- @apply .border-blue-500 .shadow;
- }
- & > div {
- @apply .rounded .mr-1 .mb-1;
- & > img {
- @apply .w-8 .h-auto;
- }
- &:hover {
- @apply .bg-gray-500;
- }
- &[data-selected="true"] {
- @apply .bg-gray-300;
- }
- }
- }
- </style>
- <div class="emoji-selector">
- <input required type="hidden" {name} value={selectedEmoji} />
- {#each emojis as emoji (emoji.id)}
- <div title={emoji.name} data-selected={selectedEmoji === emoji.id}>
- <img
- data-emoji-id={emoji.id}
- on:click={emojiSelected}
- alt="Emote {emoji.id}"
- src={emoji.url} />
- </div>
- {/each}
- </div>
|