Mentions & Hashtags

AlpineJS and Tailwind Mention and Hashtags

Share

/r/n <\/a>\r\n <\/div>\r\n<\/div>\r\n\r\n<script src=https://www.creative-tim.com/"https:////unpkg.com//alpinejs/" defer><\/script>\r\n<script>\r\n function app() {\r\n return {\r\n keys: ['#', '@'],\r\n users: [\r\n {\r\n label: \"Rodolfo Kidd\",\r\n value: \"rodolfo.kidd\",\r\n },\r\n {\r\n label: \"Sheldon Lindsey\",\r\n value: \"sheldonlindsey43\",\r\n },\r\n {\r\n label: \"Adan Best\",\r\n value: \"adan_best\",\r\n },\r\n {\r\n label: \"Rosemary Hurley\",\r\n value: \"rosemaryhurley22\",\r\n },\r\n {\r\n label: \"Allyson Livingston\",\r\n value: \"_allyson_livingston_\",\r\n },\r\n {\r\n label: \"Carolina Gray\",\r\n value: \"carolinagray\",\r\n },\r\n {\r\n label: \"Howard Tran\",\r\n value: \"howardtran923\",\r\n },\r\n ],\r\n tags: [\r\n {\r\n label: \"alpine\",\r\n value: \"alpine\",\r\n },\r\n {\r\n label: \"alpinestars\",\r\n value: \"alpinestars\",\r\n },\r\n {\r\n label: \"alpinebabes\",\r\n value: \"alpinebabes\",\r\n },\r\n {\r\n label: \"alpinestar\",\r\n value: \"alpinestar\",\r\n },\r\n {\r\n label: \"alpinelake\",\r\n value: \"alpinelake\",\r\n },\r\n {\r\n label: \"alpinewhite\",\r\n value: \"alpinewhite\",\r\n },\r\n {\r\n label: \"alpineclimbing\",\r\n value: \"alpineclimbing\",\r\n },\r\n {\r\n label: \"alpineloop\",\r\n value: \"alpineloop\",\r\n },\r\n {\r\n label: \"alpinebreak\",\r\n value: \"alpinebreak\",\r\n },\r\n {\r\n label: \"alpineskiing\",\r\n value: \"alpineskiing\",\r\n },\r\n {\r\n label: \"alpinea110\",\r\n value: \"alpinea110\",\r\n },\r\n {\r\n label: \"alpineski\",\r\n value: \"alpineski\",\r\n },\r\n {\r\n label: \"alpinelakeswilderness\",\r\n value: \"alpinelakeswilderness\",\r\n },\r\n {\r\n label: \"alpinevillage\",\r\n value: \"alpinevillage\",\r\n },\r\n {\r\n label: \"alpinevogue\",\r\n value: \"alpinevogue\",\r\n },\r\n ],\r\n items: [],\r\n placement: 'top-start',\r\n omitKey: false,\r\n filteringDisabled: false,\r\n insertSpace: false,\r\n mapInsert: null,\r\n limit: 4,\r\n key: null,\r\n oldKey: null,\r\n searchText: null,\r\n caretPosition: {\r\n top: 0,\r\n left: 0,\r\n },\r\n selectedIndex: 0,\r\n input: null,\r\n showPopover: false,\r\n filteredItems: function() {\r\n if (!this.searchText || this.filteringDisabled) {\r\n return this.items\r\n }\r\n const searchText = this.searchText.toLowerCase()\r\n return this.items.filter(item => {\r\n \/** @type {string} *\/\r\n let text\r\n if (item.searchText) {\r\n text = item.searchText\r\n } else if (item.label) {\r\n text = item.label\r\n } else {\r\n text = ''\r\n for (const key in item) {\r\n text += item[key]\r\n }\r\n }\r\n return text.toLowerCase().includes(searchText)\r\n })\r\n },\r\n displayedItems: [],\r\n updateDisplayedItems: function() {\r\n selectedIndex = 0;\r\n return this.displayedItems = this.filteredItems().slice(0, this.limit)\r\n },\r\n \/\/\r\n isIe: function() {\r\n const userAgent = typeof window !== 'undefined' ? window.navigator.userAgent : '';\r\n return userAgent.indexOf('MSIE ') !== -1 || userAgent.indexOf('Trident\/') !== -1;\r\n },\r\n isFirefox: function() {\r\n return !(window.mozInnerScreenX == null);\r\n },\r\n setInput: function(el) {\r\n this.input = el;\r\n },\r\n getCaretPosition: function(element, position) {\r\n var mirrorDiv, computed, style;\r\n \/\/ The properties that we copy into a mirrored div.\r\n \/\/ Note that some browsers, such as Firefox,\r\n \/\/ do not concatenate properties, i.e. padding-top, bottom etc. -> padding,\r\n \/\/ so we have to do every single property specifically.\r\n var properties = [\r\n 'boxSizing',\r\n 'width', \/\/ on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does\r\n 'height',\r\n 'overflowX',\r\n 'overflowY', \/\/ copy the scrollbar for IE\r\n\r\n 'borderTopWidth',\r\n 'borderRightWidth',\r\n 'borderBottomWidth',\r\n 'borderLeftWidth',\r\n\r\n 'paddingTop',\r\n 'paddingRight',\r\n 'paddingBottom',\r\n 'paddingLeft',\r\n\r\n \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font\r\n 'fontStyle',\r\n 'fontVariant',\r\n 'fontWeight',\r\n 'fontStretch',\r\n 'fontSize',\r\n 'lineHeight',\r\n 'fontFamily',\r\n\r\n 'textAlign',\r\n 'textTransform',\r\n 'textIndent',\r\n 'textDecoration', \/\/ might not make a difference, but better be safe\r\n\r\n 'letterSpacing',\r\n 'wordSpacing'\r\n ];\r\n \/\/ mirrored div\r\n mirrorDiv = document.getElementById(element.nodeName + '--mirror-div');\r\n if (!mirrorDiv) {\r\n mirrorDiv = document.createElement('div');\r\n mirrorDiv.id = element.nodeName + '--mirror-div';\r\n document.body.appendChild(mirrorDiv);\r\n }\r\n\r\n style = mirrorDiv.style;\r\n computed = getComputedStyle(element);\r\n\r\n \/\/ default textarea styles\r\n style.whiteSpace = 'pre-wrap';\r\n if (element.nodeName !== 'INPUT')\r\n style.wordWrap = 'break-word'; \/\/ only for textarea-s\r\n\r\n \/\/ position off-screen\r\n style.position = 'absolute'; \/\/ required to return coordinates properly\r\n style.top = element.offsetTop + parseInt(computed.borderTopWidth) + 'px';\r\n style.left = \"400px\";\r\n style.visibility = 'hidden'; \/\/ not 'display: none' because we want rendering\r\n\r\n \/\/ transfer the element's properties to the div\r\n properties.forEach(function(prop) {\r\n style[prop] = computed[prop];\r\n });\r\n\r\n if (this.isFirefox()) {\r\n style.width = parseInt(computed.width) - 2 + 'px' \/\/ Firefox adds 2 pixels to the padding - https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=753662\r\n \/\/ Firefox lies about the overflow property for textareas: https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=984275\r\n if (element.scrollHeight > parseInt(computed.height))\r\n style.overflowY = 'scroll';\r\n } else {\r\n style.overflow = 'hidden'; \/\/ for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'\r\n }\r\n\r\n mirrorDiv.textContent = element.value.substring(0, position);\r\n \/\/ the second special handling for input type=\"text\" vs textarea: spaces need to be replaced with non-breaking spaces - http:\/\/stackoverflow.com\/a\/13402035\/1269037\r\n if (element.nodeName === 'INPUT')\r\n mirrorDiv.textContent = mirrorDiv.textContent.replace(\/\\s\/g, \"\\u00a0\");\r\n\r\n var span = document.createElement('span');\r\n \/\/ Wrapping must be replicated *exactly*, including when a long word gets\r\n \/\/ onto the next line, with whitespace at the end of the line before (#7).\r\n \/\/ The *only* reliable way to do that is to copy the *entire* rest of the\r\n \/\/ textarea's content into the <span> created at the caret position.\r\n \/\/ for inputs, just '.' would be enough, but why bother?\r\n span.textContent = element.value.substring(position) || '.'; \/\/ || because a completely empty faux span doesn't render at all\r\n mirrorDiv.appendChild(span);\r\n\r\n var coordinates = {\r\n top: span.offsetTop + parseInt(computed['borderTopWidth']) - element.scrollTop,\r\n left: span.offsetLeft + parseInt(computed['borderLeftWidth']),\r\n };\r\n\r\n return coordinates;\r\n },\r\n onInput: function(e) {\r\n this.checkKey()\r\n },\r\n onBlur: function() {\r\n this.closeMenu()\r\n },\r\n onKeyDown: function(e) {\r\n if (this.key) {\r\n if( this.keys.includes(e.key) ) {\r\n return this.cancelEvent(e);\r\n }\r\n this.updateDisplayedItems();\r\n if (e.key === 'ArrowDown' || e.keyCode === 40) {\r\n this.selectedIndex++\r\n if (this.selectedIndex >= this.displayedItems.length) {\r\n this.selectedIndex = 0\r\n }\r\n this.cancelEvent(e)\r\n }\r\n if (e.key === 'ArrowUp' || e.keyCode === 38) {\r\n this.selectedIndex--\r\n if (this.selectedIndex < 0) {\r\n this.selectedIndex = this.displayedItems.length - 1\r\n }\r\n this.cancelEvent(e)\r\n }\r\n if ((e.key === 'Enter' || e.key === 'Tab' || e.keyCode === 13 || e.keyCode === 9) &&\r\n this.displayedItems.length > 0) {\r\n this.applyMention(this.selectedIndex)\r\n this.cancelEvent(e)\r\n }\r\n if (e.key === 'Escape' || e.keyCode === 27) {\r\n this.closeMenu()\r\n this.cancelEvent(e)\r\n }\r\n }\r\n },\r\n onKeyUp: function(e) {\r\n if (this.cancelKeyUp && (e.key === this.cancelKeyUp || e.keyCode === this.cancelKeyCode)) {\r\n this.cancelEvent(e)\r\n }\r\n this.cancelKeyUp = null\r\n \/\/ IE\r\n this.cancelKeyCode = null\r\n },\r\n cancelEvent: function(e) {\r\n e.preventDefault()\r\n e.stopPropagation()\r\n this.cancelKeyUp = e.key\r\n \/\/ IE\r\n this.cancelKeyCode = e.keyCode\r\n },\r\n onScroll: function() {\r\n this.updateCaretPosition()\r\n },\r\n getSelectionStart: function() {\r\n return this.input.selectionStart\r\n },\r\n setCaretPosition: function(index) {\r\n this.$nextTick(() => {\r\n this.input.selectionEnd = index\r\n })\r\n },\r\n getValue: function() {\r\n return this.input.value\r\n },\r\n setValue: function(value) {\r\n this.input.value = value\r\n },\r\n checkKey: function() {\r\n const index = this.getSelectionStart()\r\n if (index >= 0) {\r\n const { key, keyIndex } = this.getLastKeyBeforeCaret(index)\r\n const searchText = this.lastSearchText = this.getLastSearchText(index, keyIndex)\r\n if (!(keyIndex < 1 || \/\\s\/.test(this.getValue()[keyIndex - 1]))) {\r\n return false\r\n }\r\n if (searchText != null) {\r\n this.openMenu(key, keyIndex)\r\n this.searchText = searchText;\r\n this.updateDisplayedItems();\r\n return true\r\n }\r\n }\r\n this.closeMenu()\r\n return false\r\n },\r\n getLastKeyBeforeCaret: function(caretIndex) {\r\n const [keyData] = this.keys.map(key => ({\r\n key,\r\n keyIndex: this.getValue().lastIndexOf(key, caretIndex - 1),\r\n })).sort((a, b) => b.keyIndex - a.keyIndex)\r\n return keyData\r\n },\r\n getLastSearchText: function(caretIndex, keyIndex) {\r\n if (keyIndex !== -1) {\r\n const searchText = this.getValue().substring(keyIndex + 1, caretIndex)\r\n \/\/ If there is a space we close the menu\r\n if (!\/\\s\/.test(searchText)) {\r\n return searchText\r\n }\r\n }\r\n return null\r\n },\r\n openMenu: function(key, keyIndex) {\r\n if (this.key !== key) {\r\n this.key = key\r\n this.keyIndex = keyIndex\r\n this.updateCaretPosition()\r\n this.selectedIndex = 0\r\n this.showPopover = true;\r\n this.items = this.key === '@' ? this.users : this.tags\r\n }\r\n },\r\n closeMenu: function() {\r\n if (this.key != null) {\r\n this.oldKey = this.key\r\n this.showPopover = false;\r\n this.key = null\r\n }\r\n },\r\n updateCaretPosition: function() {\r\n if (this.key) {\r\n this.caretPosition = this.getCaretPosition(this.input, this.keyIndex);\r\n }\r\n },\r\n applyMention: function(itemIndex) {\r\n const item = this.displayedItems[itemIndex]\r\n const value = (this.omitKey ? '' : this.key || '') + String(this.mapInsert ? this.mapInsert(item, this.key) : item.value) + (this.insertSpace ? ' ' : '')\r\n this.setValue(this.replaceText(this.getValue(), this.searchText, value, this.keyIndex))\r\n this.setCaretPosition(this.keyIndex + value.length);\r\n this.closeMenu()\r\n },\r\n replaceText: function(text, searchText, newText, index) {\r\n return text.slice(0, index) + newText + text.slice(index + searchText.length + 1, text.length)\r\n },\r\n };\r\n }\r\n<\/script>","author_type":"App\\User","author_id":977,"collection_id":null,"fork_id":null,"votes":6,"score":"5.0","visits":6488,"popularity":1270,"slug":"mentions-hashtags","approved":1,"created_at":"2021-12-10T11:08:49.000000Z","updated_at":"2024-09-19T02:49:18.000000Z","downloads":97,"code_views":1459,"center":false,"notified":0,"premium":1,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":5542,"model_type":"App\\Component","model_id":2757,"collection_name":"preview","name":"temp59595","file_name":"temp59595.png","mime_type":"image\/png","disk":"public","size":19158,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp59595___media_library_original_1280_957.png","temp59595___media_library_original_1070_799.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvVVF0aWdnVGVLZGdGM1pwQUtEbWdCcjB3R1VYR0tUU0FjblNtSWNSbWtBbTBVQUcwVUFRVFRlVlV0MktTdWYvMlE9PSI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":5428,"created_at":"2021-12-10T16:06:04.000000Z","updated_at":"2021-12-10T16:06:05.000000Z","conversions_disk":"public","uuid":"6225d890-2106-4920-83b2-deee67a12521","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/5542\/temp59595.png","preview_url":""}],"author":{"id":977,"name":"Scott Windon","slug":"scott-windon","bio":"https:\/\/linktr.ee\/scottwindon","avatar":"\/storage\/avatars\/bdSSQtrngChUVVpfr5lHlMzUqupQfYvPWmY9wj0L.jpg","header":null,"created_at":"2020-08-04T05:42:29.000000Z","updated_at":"2021-12-10T11:11:18.000000Z"},"tags":[{"id":15,"name":{"en":"Alpinejs"},"description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","meta_description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","slug":{"en":"alpinejs"},"type":null,"order_column":1,"created_at":"2021-02-16T17:13:07.000000Z","updated_at":"2023-10-27T13:23:58.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2757,"tag_id":15}},{"id":12,"name":{"en":"Inputs"},"description":"Find your inspiration with our collection of free input examples. Copy and paste them into your app and spend less time on coding.","meta_description":"Find your inspiration with our collection of free input examples. Copy and paste them into your app and spend less time on coding.","slug":{"en":"inputs"},"type":null,"order_column":6,"created_at":"2020-09-29T11:58:52.000000Z","updated_at":"2022-08-01T16:21:48.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2757,"tag_id":12}},{"id":5,"name":{"en":"Widget"},"description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","slug":{"en":"widget"},"type":null,"order_column":14,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:16:36.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2757,"tag_id":5}}],"fork":null,"favorites":[{"id":368,"name":"khatabwedaa","slug":"khatabwedaa","bio":"Web designer & developer https:\/\/merakiui.com.","avatar":"\/storage\/avatars\/ckQ2aybMQQJgUPv1HOe9XbpNmQmltLlWyy4CSVuJ.jpg","header":"\/storage\/headers\/mGwrFeXBOBPoz7DhAt98sH59byb7HUxdsTd3tVYB.png","created_at":"2020-02-15T10:59:29.000000Z","updated_at":"2023-05-01T07:26:40.000000Z","pivot":{"component_id":2757,"user_id":368}},{"id":4364,"name":"Sown Java","slug":"sown-java","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/73bbc0b52a1d4527c79692a40c88f682","header":null,"created_at":"2021-07-25T11:59:24.000000Z","updated_at":"2021-07-25T11:59:24.000000Z","pivot":{"component_id":2757,"user_id":4364}},{"id":3558,"name":"whoisthisstud","slug":"whoisthisstud","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/44807533?v=4","header":null,"created_at":"2021-05-25T15:23:04.000000Z","updated_at":"2021-05-25T15:23:04.000000Z","pivot":{"component_id":2757,"user_id":3558}},{"id":278,"name":"mithicher","slug":"mithicher","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/653167205140434944\/M2z8w8DT_normal.png","header":null,"created_at":"2020-01-02T16:09:46.000000Z","updated_at":"2020-01-02T16:09:46.000000Z","pivot":{"component_id":2757,"user_id":278}},{"id":4898,"name":"brunohafonso95","slug":"brunohafonso95","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/43271781?v=4","header":null,"created_at":"2021-09-07T03:42:51.000000Z","updated_at":"2021-09-07T03:42:51.000000Z","pivot":{"component_id":2757,"user_id":4898}},{"id":6194,"name":"Akash","slug":"akash","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/786700e0f045e5574a25bf8acf281ec8","header":null,"created_at":"2021-12-16T19:18:47.000000Z","updated_at":"2021-12-16T19:18:47.000000Z","pivot":{"component_id":2757,"user_id":6194}},{"id":6203,"name":"marcos","slug":"marcos-1","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/7f2ba3bd7ba9feb80d36e6b301c9bfc7","header":null,"created_at":"2021-12-17T13:07:38.000000Z","updated_at":"2021-12-17T13:07:38.000000Z","pivot":{"component_id":2757,"user_id":6203}},{"id":6222,"name":"pedrova096","slug":"pedrova096","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/42945377?v=4","header":null,"created_at":"2021-12-19T14:28:08.000000Z","updated_at":"2021-12-19T14:28:08.000000Z","pivot":{"component_id":2757,"user_id":6222}},{"id":6300,"name":"wagneralmeida-liveonsolutions","slug":"wagneralmeida-liveonsolutions","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/84327740?v=4","header":null,"created_at":"2021-12-27T21:59:20.000000Z","updated_at":"2021-12-27T21:59:20.000000Z","pivot":{"component_id":2757,"user_id":6300}},{"id":6381,"name":"aboredvaro","slug":"aboredvaro","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/34165099?v=4","header":null,"created_at":"2022-01-04T12:22:12.000000Z","updated_at":"2022-01-04T12:22:12.000000Z","pivot":{"component_id":2757,"user_id":6381}},{"id":6489,"name":"ricvillagrana","slug":"ricvillagrana-1","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/9273142?v=4","header":null,"created_at":"2022-01-13T05:46:46.000000Z","updated_at":"2022-01-13T05:46:46.000000Z","pivot":{"component_id":2757,"user_id":6489}},{"id":6545,"name":"lexprimost","slug":"lexprimost","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/5768206?v=4","header":null,"created_at":"2022-01-17T00:55:44.000000Z","updated_at":"2022-01-17T00:55:44.000000Z","pivot":{"component_id":2757,"user_id":6545}},{"id":7781,"name":"ritesh221b","slug":"ritesh221b","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/26463031?v=4","header":null,"created_at":"2022-05-07T19:12:52.000000Z","updated_at":"2022-05-07T19:12:52.000000Z","pivot":{"component_id":2757,"user_id":7781}},{"id":5232,"name":"natecorkish","slug":"natecorkish","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/66919946?v=4","header":null,"created_at":"2021-09-30T00:42:41.000000Z","updated_at":"2021-09-30T00:42:41.000000Z","pivot":{"component_id":2757,"user_id":5232}},{"id":8531,"name":"quadcodes","slug":"quadcodes","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/1052489?v=4","header":null,"created_at":"2022-07-29T08:39:03.000000Z","updated_at":"2022-07-29T08:39:03.000000Z","pivot":{"component_id":2757,"user_id":8531}},{"id":8545,"name":"Kryptanyte","slug":"kryptanyte","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/6505861?v=4","header":null,"created_at":"2022-07-31T06:13:05.000000Z","updated_at":"2022-07-31T06:13:05.000000Z","pivot":{"component_id":2757,"user_id":8545}},{"id":8713,"name":"eimkasp","slug":"eimkasp","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/1290547?v=4","header":null,"created_at":"2022-08-14T19:13:43.000000Z","updated_at":"2022-08-14T19:13:43.000000Z","pivot":{"component_id":2757,"user_id":8713}},{"id":10966,"name":"MarkoBogdanovski","slug":"markobogdanovski","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/1500286?v=4","header":null,"created_at":"2023-02-13T12:19:26.000000Z","updated_at":"2023-02-13T12:19:26.000000Z","pivot":{"component_id":2757,"user_id":10966}},{"id":10204,"name":"BenitoRubenO","slug":"benitorubeno","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1560417882676367362\/KHcjQxot_normal.jpg","header":null,"created_at":"2022-12-21T15:14:55.000000Z","updated_at":"2022-12-21T15:14:55.000000Z","pivot":{"component_id":2757,"user_id":10204}},{"id":11411,"name":"A.Sander","slug":"asander","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/2b05423ba2d2eae493505846d42f3156","header":null,"created_at":"2023-03-12T17:15:53.000000Z","updated_at":"2023-03-12T17:15:53.000000Z","pivot":{"component_id":2757,"user_id":11411}},{"id":8341,"name":"AnthonyFrancis","slug":"anthonyfrancis","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/3010099?v=4","header":null,"created_at":"2022-07-05T13:21:44.000000Z","updated_at":"2022-07-05T13:21:44.000000Z","pivot":{"component_id":2757,"user_id":8341}},{"id":12175,"name":"lastofthedinosaurs","slug":"lastofthedinosaurs","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/91705770?v=4","header":null,"created_at":"2023-05-02T09:21:58.000000Z","updated_at":"2023-05-02T09:21:58.000000Z","pivot":{"component_id":2757,"user_id":12175}},{"id":13331,"name":"exonos","slug":"exonos","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/58151233?v=4","header":null,"created_at":"2023-07-23T15:48:02.000000Z","updated_at":"2023-07-23T15:48:02.000000Z","pivot":{"component_id":2757,"user_id":13331}},{"id":6147,"name":"Nahuelpack","slug":"nahuelpack","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/36615599?v=4","header":null,"created_at":"2021-12-13T19:42:48.000000Z","updated_at":"2021-12-13T19:42:48.000000Z","pivot":{"component_id":2757,"user_id":6147}},{"id":14756,"name":"iyuhi","slug":"iyuhi","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/125770443?v=4","header":null,"created_at":"2023-10-18T16:30:27.000000Z","updated_at":"2023-10-18T16:30:27.000000Z","pivot":{"component_id":2757,"user_id":14756}},{"id":17261,"name":"Zaroouk","slug":"zaroouk","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/93958647?v=4","header":null,"created_at":"2024-02-28T22:29:31.000000Z","updated_at":"2024-02-28T22:29:31.000000Z","pivot":{"component_id":2757,"user_id":17261}},{"id":19381,"name":"eliekicode","slug":"eliekicode","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/146895012?v=4","header":null,"created_at":"2024-06-16T17:34:27.000000Z","updated_at":"2024-06-16T17:34:27.000000Z","pivot":{"component_id":2757,"user_id":19381}}]}" :edit="false"> Full screen Preview

Scott Windon

41 components

Mentions & Hashtags

Community Rate

Related components