react-newsfeed/dist/index.mjs

A customizable social media post component for React applications that mimics popular social media feeds with features like likes, comments, and image galleries.

import e,{useState as n,useRef as t,useEffect as r}from"react";!function(e,n){void 0===n&&(n={});var t=n.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}/*\n! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden=\"until-found\"])) {\n  display: none;\n}\r\n.pointer-events-none {\n  pointer-events: none;\n}\r\n.fixed {\n  position: fixed;\n}\r\n.absolute {\n  position: absolute;\n}\r\n.relative {\n  position: relative;\n}\r\n.inset-0 {\n  inset: 0px;\n}\r\n.left-4 {\n  left: 1rem;\n}\r\n.right-2 {\n  right: 0.5rem;\n}\r\n.right-4 {\n  right: 1rem;\n}\r\n.top-1\\/2 {\n  top: 50%;\n}\r\n.top-12 {\n  top: 3rem;\n}\r\n.top-4 {\n  top: 1rem;\n}\r\n.-z-10 {\n  z-index: -10;\n}\r\n.z-10 {\n  z-index: 10;\n}\r\n.z-50 {\n  z-index: 50;\n}\r\n.ml-1 {\n  margin-left: 0.25rem;\n}\r\n.ml-2 {\n  margin-left: 0.5rem;\n}\r\n.mr-2 {\n  margin-right: 0.5rem;\n}\r\n.mt-1 {\n  margin-top: 0.25rem;\n}\r\n.mt-2 {\n  margin-top: 0.5rem;\n}\r\n.flex {\n  display: flex;\n}\r\n.grid {\n  display: grid;\n}\r\n.hidden {\n  display: none;\n}\r\n.aspect-square {\n  aspect-ratio: 1 / 1;\n}\r\n.h-10 {\n  height: 2.5rem;\n}\r\n.h-12 {\n  height: 3rem;\n}\r\n.h-3 {\n  height: 0.75rem;\n}\r\n.h-5 {\n  height: 1.25rem;\n}\r\n.h-6 {\n  height: 1.5rem;\n}\r\n.h-8 {\n  height: 2rem;\n}\r\n.h-auto {\n  height: auto;\n}\r\n.h-full {\n  height: 100%;\n}\r\n.max-h-96 {\n  max-height: 24rem;\n}\r\n.max-h-full {\n  max-height: 100%;\n}\r\n.w-10 {\n  width: 2.5rem;\n}\r\n.w-12 {\n  width: 3rem;\n}\r\n.w-3 {\n  width: 0.75rem;\n}\r\n.w-48 {\n  width: 12rem;\n}\r\n.w-5 {\n  width: 1.25rem;\n}\r\n.w-6 {\n  width: 1.5rem;\n}\r\n.w-8 {\n  width: 2rem;\n}\r\n.w-full {\n  width: 100%;\n}\r\n.max-w-4xl {\n  max-width: 56rem;\n}\r\n.max-w-full {\n  max-width: 100%;\n}\r\n.flex-1 {\n  flex: 1 1 0%;\n}\r\n.-translate-y-1\\/2 {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\r\n.rotate-90 {\n  --tw-rotate: 90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\r\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\r\n.cursor-pointer {\n  cursor: pointer;\n}\r\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\r\n.grid-rows-2 {\n  grid-template-rows: repeat(2, minmax(0, 1fr));\n}\r\n.flex-wrap {\n  flex-wrap: wrap;\n}\r\n.items-center {\n  align-items: center;\n}\r\n.justify-center {\n  justify-content: center;\n}\r\n.justify-between {\n  justify-content: space-between;\n}\r\n.justify-around {\n  justify-content: space-around;\n}\r\n.gap-1 {\n  gap: 0.25rem;\n}\r\n.gap-2 {\n  gap: 0.5rem;\n}\r\n.-space-x-1 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(-0.25rem * var(--tw-space-x-reverse));\n  margin-left: calc(-0.25rem * calc(1 - var(--tw-space-x-reverse)));\n}\r\n.space-x-1 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.25rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));\n}\r\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n}\r\n.space-x-3 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.75rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));\n}\r\n.space-x-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(1rem * var(--tw-space-x-reverse));\n  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n}\r\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\r\n.overflow-hidden {\n  overflow: hidden;\n}\r\n.overflow-y-auto {\n  overflow-y: auto;\n}\r\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\r\n.rounded {\n  border-radius: 0.25rem;\n}\r\n.rounded-2xl {\n  border-radius: 1rem;\n}\r\n.rounded-full {\n  border-radius: 9999px;\n}\r\n.rounded-lg {\n  border-radius: 0.5rem;\n}\r\n.rounded-md {\n  border-radius: 0.375rem;\n}\r\n.border {\n  border-width: 1px;\n}\r\n.border-b {\n  border-bottom-width: 1px;\n}\r\n.border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));\n}\r\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\r\n.bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\r\n.bg-gray-300\\/80 {\n  background-color: rgb(209 213 219 / 0.8);\n}\r\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));\n}\r\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\r\n.bg-opacity-50 {\n  --tw-bg-opacity: 0.5;\n}\r\n.bg-opacity-60 {\n  --tw-bg-opacity: 0.6;\n}\r\n.bg-opacity-90 {\n  --tw-bg-opacity: 0.9;\n}\r\n.object-contain {\n  -o-object-fit: contain;\n     object-fit: contain;\n}\r\n.object-cover {\n  -o-object-fit: cover;\n     object-fit: cover;\n}\r\n.p-3 {\n  padding: 0.75rem;\n}\r\n.p-4 {\n  padding: 1rem;\n}\r\n.p-8 {\n  padding: 2rem;\n}\r\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\r\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\r\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\r\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\r\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\r\n.pb-3 {\n  padding-bottom: 0.75rem;\n}\r\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\r\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\r\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\r\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\r\n.font-bold {\n  font-weight: 700;\n}\r\n.font-medium {\n  font-weight: 500;\n}\r\n.font-semibold {\n  font-weight: 600;\n}\r\n.capitalize {\n  text-transform: capitalize;\n}\r\n.leading-relaxed {\n  line-height: 1.625;\n}\r\n.text-blue-600 {\n  --tw-text-opacity: 1;\n  color: rgb(37 99 235 / var(--tw-text-opacity, 1));\n}\r\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\r\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\r\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\r\n.text-gray-700 {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\r\n.text-gray-800 {\n  --tw-text-opacity: 1;\n  color: rgb(31 41 55 / var(--tw-text-opacity, 1));\n}\r\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\r\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\r\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\r\n.shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\r\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\r\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\r\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\r\n.transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\r\n.transition-transform {\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\r\n.hover\\:bg-gray-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\r\n.hover\\:bg-opacity-50:hover {\n  --tw-bg-opacity: 0.5;\n}\r\n.hover\\:text-blue-700:hover {\n  --tw-text-opacity: 1;\n  color: rgb(29 78 216 / var(--tw-text-opacity, 1));\n}\r\n.hover\\:text-gray-300:hover {\n  --tw-text-opacity: 1;\n  color: rgb(209 213 219 / var(--tw-text-opacity, 1));\n}\r\n.hover\\:text-gray-600:hover {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\r\n.hover\\:underline:hover {\n  text-decoration-line: underline;\n}\r\n.hover\\:opacity-95:hover {\n  opacity: 0.95;\n}\r\n.focus\\:bg-white:focus {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\r\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\r\n.focus\\:ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\r\n.focus\\:ring-blue-500:focus {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));\n}\r\n");var o=function(){return o=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},o.apply(this,arguments)};function i(e,n,t,r){return new(t||(t=Promise))(function(o,i){function a(e){try{l(r.next(e))}catch(e){i(e)}}function s(e){try{l(r.throw(e))}catch(e){i(e)}}function l(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t(function(e){e(n)})).then(a,s)}l((r=r.apply(e,n||[])).next())})}function a(e,n){var t,r,o,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},a=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return a.next=s(0),a.throw=s(1),a.return=s(2),"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(s){return function(l){return function(s){if(t)throw new TypeError("Generator is already executing.");for(;a&&(a=0,s[0]&&(i=0)),i;)try{if(t=1,r&&(o=2&s[0]?r.return:s[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,s[1])).done)return o;switch(r=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,r=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){i=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){i.label=s[1];break}if(6===s[0]&&i.label<o[1]){i.label=o[1],o=s;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(s);break}o[2]&&i.ops.pop(),i.trys.pop();continue}s=n.call(e,i)}catch(e){s=[6,e],r=0}finally{t=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,l])}}}function s(e,n,t){if(t||2===arguments.length)for(var r,o=0,i=n.length;o<i;o++)!r&&o in n||(r||(r=Array.prototype.slice.call(n,0,o)),r[o]=n[o]);return e.concat(r||Array.prototype.slice.call(n))}"function"==typeof SuppressedError&&SuppressedError;var l,c={exports:{}},d={};var u,p,m={};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */function h(){return u||(u=1,"production"!==process.env.NODE_ENV&&function(){function n(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===C?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case h:return"Fragment";case g:return"Profiler";case f:return"StrictMode";case y:return"Suspense";case v:return"SuspenseList";case N:return"Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case p:return"Portal";case x:return(e.displayName||"Context")+".Provider";case w:return(e._context.displayName||"Context")+".Consumer";case b:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case j:return null!==(t=e.displayName||null)?t:n(e.type)||"Memo";case k:t=e._payload,e=e._init;try{return n(e(t))}catch(e){}}return null}function t(e){return""+e}function r(e){try{t(e);var n=!1}catch(e){n=!0}if(n){var r=(n=console).error,o="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),t(e)}}function o(e){if(e===h)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===k)return"<...>";try{var t=n(e);return t?"<"+t+">":"<...>"}catch(e){return"<...>"}}function i(){return Error("react-stack-top-frame")}function a(){var e=n(this.type);return T[e]||(T[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function s(e,t,o,i,s,d,p,m){var h,f=t.children;if(void 0!==f)if(i)if(S(f)){for(i=0;i<f.length;i++)l(f[i]);Object.freeze&&Object.freeze(f)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else l(f);if(z.call(t,"key")){f=n(e);var g=Object.keys(t).filter(function(e){return"key"!==e});i=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",P[f+i]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',i,f,g,f),P[f+i]=!0)}if(f=null,void 0!==o&&(r(o),f=""+o),function(e){if(z.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return void 0!==e.key}(t)&&(r(t.key),f=""+t.key),"key"in t)for(var w in o={},t)"key"!==w&&(o[w]=t[w]);else o=t;return f&&function(e,n){function t(){c||(c=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(o,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,n,t,r,o,i,s,l){return t=i.ref,e={$$typeof:u,type:e,key:n,props:i,_owner:o},null!==(void 0!==t?t:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:a}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,f,d,0,null===(h=R.A)?null:h.getOwner(),o,p,m)}function l(e){"object"==typeof e&&null!==e&&e.$$typeof===u&&e._store&&(e._store.validated=1)}var c,d=e,u=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),f=Symbol.for("react.strict_mode"),g=Symbol.for("react.profiler"),w=Symbol.for("react.consumer"),x=Symbol.for("react.context"),b=Symbol.for("react.forward_ref"),y=Symbol.for("react.suspense"),v=Symbol.for("react.suspense_list"),j=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),C=Symbol.for("react.client.reference"),R=d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,z=Object.prototype.hasOwnProperty,S=Array.isArray,L=console.createTask?console.createTask:function(){return null},T={},O=(d={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(d,i)(),E=L(o(i)),P={};m.Fragment=h,m.jsx=function(e,n,t,r,i){var a=1e4>R.recentlyCreatedOwnerStacks++;return s(e,n,t,!1,0,i,a?Error("react-stack-top-frame"):O,a?L(o(e)):E)},m.jsxs=function(e,n,t,r,i){var a=1e4>R.recentlyCreatedOwnerStacks++;return s(e,n,t,!0,0,i,a?Error("react-stack-top-frame"):O,a?L(o(e)):E)}}()),m}var f=(p||(p=1,"production"===process.env.NODE_ENV?c.exports=function(){if(l)return d;l=1;var e=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function t(n,t,r){var o=null;if(void 0!==r&&(o=""+r),void 0!==t.key&&(o=""+t.key),"key"in t)for(var i in r={},t)"key"!==i&&(r[i]=t[i]);else r=t;return t=r.ref,{$$typeof:e,type:n,key:o,ref:void 0!==t?t:null,props:r}}return d.Fragment=n,d.jsx=t,d.jsxs=t,d}():c.exports=h()),c.exports);function g(e){var n=e.filled,t=void 0!==n&&n;return f.jsx("svg",{className:"w-5 h-5",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:t?"currentColor":"none",viewBox:"0 0 24 24",stroke:"currentColor",children:f.jsx("path",{d:"M2 10h4v12H2zM22 11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17 2 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h7c.74 0 1.38-.4 1.72-1.01l3.58-6.49c.13-.23.2-.49.2-.76v-2.74L22 11z"})})}function w(e){var n=e.direction,t=void 0===n?"":n;return f.jsx("svg",{className:"w-3 h-3 transition-transform ".concat(t),fill:"currentColor",viewBox:"0 0 20 20",children:f.jsx("path",{fillRule:"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",clipRule:"evenodd"})})}function x(){return f.jsx("svg",{className:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:f.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"})})}function b(){return f.jsx("svg",{className:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:f.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"})})}function y(){return f.jsx("svg",{className:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",children:f.jsx("path",{d:"M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"})})}function v(){return f.jsx("svg",{className:"w-3 h-3 ml-1",fill:"currentColor",viewBox:"0 0 20 20",children:f.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 3.314-2.686 6-6 6s-6-2.686-6-6a5.98 5.98 0 01.332-1.973z",clipRule:"evenodd"})})}function j(){return f.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"24",height:"24",children:f.jsx("path",{fill:"currentColor",d:"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"})})}function k(e){var n=e.src,t=e.alt,r=e.size,o=void 0===r?"md":r;return f.jsx("div",{className:"rounded-full overflow-hidden ".concat({xs:"w-6 h-6",sm:"w-6 h-6",md:"w-8 h-8",lg:"w-10 h-10"}[o]),children:f.jsx("img",{src:n,alt:t,className:"w-full h-full object-cover"})})}function N(e){var n=e.time;return f.jsxs("div",{className:"flex items-center space-x-1 text-xs text-gray-500",children:[f.jsx("span",{children:n}),f.jsx(v,{})]})}function C(e){var o=e.author,i=e.options,a=void 0===i?[]:i,s=e.extraComponent,l=n(!1),c=l[0],d=l[1],u=t(null);return r(function(){var e=function(e){u.current&&!u.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),function(){return document.removeEventListener("mousedown",e)}},[]),f.jsxs("div",{className:"flex items-center justify-between p-4 relative",children:[f.jsxs("div",{className:"flex items-center space-x-3",children:[f.jsx(k,{src:o.avatar,alt:o.name,size:"md"}),f.jsxs("div",{children:[f.jsx("h3",{className:"font-semibold text-gray-900 text-sm",children:o.name}),f.jsx(N,{time:o.timeAgo})]})]}),f.jsxs("div",{className:"flex items-center space-x-2",children:[s&&f.jsx("div",{children:s}),(null==a?void 0:a.length)>0&&f.jsxs(f.Fragment,{children:[f.jsx("button",{className:"text-gray-400 hover:text-gray-600 relative",onClick:function(){return d(!c)},children:f.jsx(y,{})}),c&&a.length>0&&f.jsx("div",{ref:u,className:"absolute right-4 top-12 bg-white shadow-lg rounded-md py-1 w-48 z-10 border border-gray-200",children:a.map(function(e,n){return f.jsxs("button",{className:"flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100",onClick:function(){e.action(),d(!1)},children:[e.icon&&f.jsx("span",{className:"mr-2",children:e.icon}),e.title]},n)})})]})]})]})}function R(e){var t=e.content,r=e.tags,o=e.showTranslation,i=e.maxLength,a=void 0===i?200:i,s=n(!1),l=s[0],c=s[1],d=t.length>a,u=l?t:"".concat(t.substring(0,a)).concat(d?"...":"");return f.jsxs("div",{className:"px-4 pb-3",children:[f.jsxs("p",{className:"text-gray-900 text-sm leading-relaxed",children:[u,d&&f.jsx("button",{onClick:function(){return c(!l)},className:"text-blue-600 hover:underline ml-1",children:l?"Show less":"Show more"})]}),f.jsx("div",{className:"flex flex-wrap gap-1 mt-2",children:r.map(function(e,n){return f.jsxs("span",{className:"text-blue-600 text-sm hover:underline cursor-pointer",children:["#",e]},n)})}),o&&f.jsx("button",{className:"text-blue-600 text-sm hover:underline mt-2",children:"See translation"})]})}var z=function(e){var n=e.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/);return n&&11===n[2].length?n[2]:null};function S(e){var o=e.images,i=n(!1),a=i[0],s=i[1],l=n(0),c=l[0],d=l[1],u=n(null),p=u[0],m=u[1],h=n(null),g=h[0],w=h[1];t(new Map);var x=function(e){d(e),s(!0),document.body.style.overflow="hidden"},b=function(){s(!1),document.body.style.overflow="unset"},y=function(){d(function(e){return 0===e?o.length-1:e-1})},v=function(){d(function(e){return e===o.length-1?0:e+1})};if(r(function(){var e=function(e){a&&("Escape"===e.key?b():"ArrowLeft"===e.key?y():"ArrowRight"===e.key&&v())};return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}},[a]),r(function(){return function(){document.body.style.overflow="unset"}},[]),0===o.length)return null;var j=function(e,n,t){var r="".concat(t," cursor-pointer hover:opacity-95 transition-opacity");if("video"===e.type)return f.jsxs("div",{className:"relative",children:[f.jsx("video",{src:e.url||"/placeholder.svg",className:r,onClick:function(){return x(n)},controls:!0,autoPlay:!0,muted:!0,playsInline:!0}),f.jsx("div",{className:"absolute inset-0 flex items-center justify-center pointer-events-none",children:f.jsx("div",{className:"bg-black bg-opacity-60 rounded-full p-3",children:f.jsx("svg",{className:"w-8 h-8 text-white",fill:"currentColor",viewBox:"0 0 20 20",children:f.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z",clipRule:"evenodd"})})})})]},e.id);if("youtube"===e.type){var o=z(e.url||"");if(o)return f.jsx("iframe",{src:"https://www.youtube.com/embed/".concat(o,"?autoplay=1&mute=1&playsinline=1&loop=1&controls=1&modestbranding=1"),className:"w-full h-full max-w-4xl max-h-3xl",style:{aspectRatio:"16/9"},allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0})}return f.jsx("img",{src:e.url||"/placeholder.svg",alt:e.alt,className:r,onClick:function(){return x(n)}},e.id)};return f.jsxs(f.Fragment,{children:[function(){if(1===o.length)return f.jsx("div",{className:"w-full",children:j(o[0],0,"w-full h-auto object-cover")});if(2===o.length)return f.jsx("div",{className:"grid grid-cols-2 gap-1",children:o.slice(0,2).map(function(e,n){return f.jsx("div",{className:"aspect-square overflow-hidden",children:j(e,n,"w-full h-full object-cover")},e.id)})});if(3===o.length)return f.jsxs("div",{className:"grid grid-cols-2 gap-1",children:[f.jsx("div",{className:"aspect-square overflow-hidden",children:j(o[0],0,"w-full h-full object-cover")}),f.jsx("div",{className:"grid grid-rows-2 gap-1",children:o.slice(1,3).map(function(e,n){return f.jsx("div",{className:"aspect-square overflow-hidden",children:j(e,n+1,"w-full h-full object-cover")},e.id)})})]});var e=o.slice(0,4),n=o.length-4;return f.jsx("div",{className:"grid grid-cols-2 gap-1",children:e.map(function(e,t){return f.jsxs("div",{className:"aspect-square overflow-hidden relative",children:[j(e,t,"w-full h-full object-cover"),3===t&&n>0&&f.jsx("div",{className:"absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center cursor-pointer hover:bg-opacity-50 transition-all",onClick:function(e){e.stopPropagation(),x(t)},children:f.jsxs("span",{className:"text-white text-2xl font-bold",children:["+",n]})})]},e.id)})})}(),a&&f.jsxs("div",{className:"fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center",children:[f.jsx("button",{onClick:b,className:"absolute top-4 right-4 text-white text-3xl hover:text-gray-300 transition-colors z-10","aria-label":"Close lightbox",children:"×"}),f.jsxs("div",{className:"absolute top-4 left-4 text-white text-sm bg-black bg-opacity-50 px-3 py-1 rounded z-10 flex items-center gap-2",children:[f.jsxs("span",{children:[c+1," / ",o.length]}),o[c].type&&f.jsxs(f.Fragment,{children:[f.jsx("span",{children:"•"}),f.jsx("span",{className:"capitalize",children:o[c].type})]})]}),o.length>1&&f.jsx("button",{onClick:y,className:"absolute left-4 top-1/2 transform -translate-y-1/2 text-white hover:text-gray-300 transition-colors z-10 bg-gray-300/80 w-12 h-12 rounded-full flex items-center justify-center","aria-label":"Previous image",children:f.jsx("svg",{width:"24px",height:"24px",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:f.jsx("path",{d:"M15 7L10 12L15 17",stroke:"#000000","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})})}),o.length>1&&f.jsx("button",{onClick:v,className:"absolute right-4 top-1/2 transform -translate-y-1/2 text-white hover:text-gray-300 transition-colors z-10 bg-gray-300/80 w-12 h-12 rounded-full flex items-center justify-center","aria-label":"Next image",children:f.jsx("svg",{width:"24px",height:"24px",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:f.jsx("path",{d:"M10 7L15 12L10 17",stroke:"#000000","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})})}),f.jsx("div",{className:"w-full h-full flex items-center justify-center p-8",onTouchStart:function(e){w(null),m(e.targetTouches[0].clientX)},onTouchMove:function(e){w(e.targetTouches[0].clientX)},onTouchEnd:function(){if(p&&g){var e=p-g,n=e<-50;e>50?v():n&&y()}},children:function(e){if("video"===e.type)return f.jsx("video",{src:e.url||"/placeholder.svg",className:"max-w-full max-h-full object-contain",controls:!0,autoPlay:!0});if("youtube"===e.type){var n=z(e.url||"");if(n)return f.jsx("iframe",{src:"https://www.youtube.com/embed/".concat(n,"?autoplay=1&mute=1&playsinline=1&loop=1&controls=1&modestbranding=1"),className:"w-full h-full max-w-4xl max-h-3xl",style:{aspectRatio:"16/9"},allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0})}return f.jsx("img",{src:e.url||"/placeholder.svg",alt:e.alt,className:"max-w-full max-h-full object-contain"})}(o[c])}),f.jsx("div",{className:"absolute inset-0 -z-10",onClick:b})]})]})}function L(e){var n=e.liked,t=e.likeCount,r=e.commentCount;e.showComments;var o=e.onLike,i=e.onToggleComments,a=e.onClickShare;return f.jsxs(f.Fragment,{children:[f.jsx("div",{className:"px-4 py-3 border-b border-gray-200",children:f.jsxs("div",{className:"flex items-center justify-between",children:[f.jsxs("div",{className:"flex items-center space-x-1",children:[f.jsx("div",{className:"flex -space-x-1",children:f.jsx("div",{className:"w-5 h-5 rounded-full flex items-center justify-center text-white text-xs",children:"👍"})}),f.jsxs("span",{className:"text-gray-600 text-sm ml-2",children:[t," Likes"]})]}),f.jsxs("button",{onClick:i,className:"text-gray-600 text-sm hover:underline",children:[r," Comments"]})]})}),f.jsx("div",{className:"px-4 py-2 border-b border-gray-200",children:f.jsxs("div",{className:"flex justify-around",children:[f.jsxs("button",{onClick:o,className:"flex items-center space-x-2 px-4 py-2 rounded-md hover:bg-gray-100 transition-colors ".concat(n?"text-blue-600":"text-gray-600"),children:[f.jsx(g,{filled:n}),f.jsx("span",{className:"text-sm font-medium",children:"Like"})]}),f.jsxs("button",{onClick:i,className:"flex items-center space-x-2 px-4 py-2 rounded-md hover:bg-gray-100 text-gray-600 transition-colors",children:[f.jsx(x,{}),f.jsx("span",{className:"text-sm font-medium",children:"Comment"})]}),f.jsxs("button",{onClick:a,className:"flex items-center space-x-2 px-4 py-2 rounded-md hover:bg-gray-100 text-gray-600 transition-colors",children:[f.jsx(b,{}),f.jsx("span",{className:"text-sm font-medium",children:"Share"})]})]})})]})}function T(e){var n=e.liked,t=e.count,r=e.onClick;return f.jsxs("button",{onClick:r,className:"flex items-center space-x-1 ".concat(n?"text-blue-600 font-semibold":""),children:[f.jsx("span",{children:"👍"}),t>0&&f.jsx("span",{children:t}),f.jsx("span",{children:"Like"})]})}function O(e){var n,t=e.reply,r=e.onLike,o=e.onDelete;return f.jsxs("div",{className:"flex space-x-2",children:[f.jsx(k,{src:t.avatar,alt:t.author,size:"sm"}),f.jsxs("div",{className:"flex-1",children:[f.jsxs("div",{className:"bg-gray-100 rounded-2xl px-3 py-2",children:[f.jsx("h5",{className:"font-semibold text-xs text-gray-900",children:t.author}),f.jsx("p",{className:"text-xs text-gray-800 mt-1",children:t.content})]}),f.jsxs("div",{className:"flex items-center space-x-3 mt-1 text-xs text-gray-500",children:[f.jsx(T,{liked:t.liked,count:t.likes,onClick:r}),null!==(n=t.canDelete)&&void 0!==n&&n&&f.jsx("button",{onClick:o,className:"hover:underline",children:"Delete"}),f.jsx(N,{time:t.timestamp})]})]})]})}function E(e){var n=e.replies,t=e.showReplies,r=e.onToggleReplies,o=e.onLikeReply,i=e.onDeleteReply;return f.jsxs("div",{className:"mt-2",children:[f.jsxs("button",{onClick:r,className:"text-xs text-gray-500 hover:underline flex items-center space-x-1",children:[f.jsx(w,{direction:t?"rotate-90":""}),f.jsxs("span",{children:[n.length," ",1===n.length?"reply":"replies"]})]}),t&&f.jsx("div",{className:"mt-2 space-y-2",children:n.map(function(e){return f.jsx(O,{reply:e,onLike:function(){return o(e.id)},onDelete:function(){return i(e.id)}},e.id)})})]})}function P(e){var n=e.value,t=e.onChange,r=e.onSubmit,o=e.placeholder,i=void 0===o?"Write a reply...":o;return f.jsxs("div",{className:"flex space-x-2 mt-2",children:[f.jsx("div",{className:"flex-1",children:f.jsx("input",{type:"text",value:n,onChange:function(e){return t(e.target.value)},placeholder:i,className:"w-full px-3 py-1 bg-gray-100 rounded-full text-sm focus:outline-none focus:bg-white focus:ring-2 focus:ring-blue-500",onKeyPress:function(e){return"Enter"===e.key&&r()}})}),n&&f.jsx("button",{onClick:r,className:"text-blue-600 hover:text-blue-700 text-sm",children:f.jsx(j,{})})]})}function M(e){var t,r=e.comment,o=e.onLike,i=e.onDelete,a=e.onLikeReply,s=e.onDeleteReply,l=e.onToggleReplies,c=e.onToggleReplyInput,d=e.onPostReply,u=n(""),p=u[0],m=u[1];return f.jsx("div",{className:"p-4 border-b border-gray-200",children:f.jsxs("div",{className:"flex space-x-3",children:[f.jsx(k,{src:r.avatar,alt:r.author,size:"sm"}),f.jsxs("div",{className:"flex-1",children:[f.jsxs("div",{className:"bg-gray-100 rounded-2xl px-3 py-2",children:[f.jsx("h4",{className:"font-semibold text-sm text-gray-900",children:r.author}),f.jsx("p",{className:"text-sm text-gray-800 mt-1",children:r.content})]}),f.jsxs("div",{className:"flex items-center space-x-4 mt-1 text-xs text-gray-500",children:[r.likes>0&&f.jsxs("span",{className:"flex items-center space-x-1",children:[f.jsx("span",{children:"👍"}),f.jsx("span",{children:r.likes})]}),f.jsx("button",{onClick:o,className:"hover:underline ".concat(r.liked?"text-blue-600 font-semibold":""),children:"Like"}),f.jsx("button",{onClick:c,className:"hover:underline",children:"Reply"}),null!==(t=r.canDelete)&&void 0!==t&&t&&f.jsx("button",{onClick:i,className:"hover:underline",children:"Delete"}),f.jsx(N,{time:r.timestamp})]}),r.showReplyInput&&f.jsx(P,{value:p,onChange:m,onSubmit:function(){p.trim()&&(d(p),m(""))},placeholder:"Write a reply..."}),r.replies.length>0&&f.jsx(E,{replies:r.replies,showReplies:r.showReplies,onToggleReplies:l,onLikeReply:a,onDeleteReply:s})]})]})})}function _(e){var n=e.comments,t=e.onLikeComment,r=e.onDeleteComment,o=e.onLikeReply,i=e.onDeleteReply,a=e.onToggleReplies,s=e.onToggleReplyInput,l=e.onPostReply;return f.jsx("div",{className:"max-h-96 overflow-y-auto",children:n.map(function(e){return f.jsx(M,{comment:e,onLike:function(){return t(e.id)},onDelete:function(){return r(e.id)},onLikeReply:function(n){return o(e.id,n)},onDeleteReply:function(n){return i(e.id,n)},onToggleReplies:function(){return a(e.id)},onToggleReplyInput:function(){return s(e.id)},onPostReply:function(n){return l(e.id,n)}},e.id)})})}function A(e){var n=e.value,t=e.onChange,r=e.onSubmit,o=e.placeholder,i=void 0===o?"Write a comment...":o;return f.jsx("div",{className:"p-4 border-b border-gray-200",children:f.jsx("div",{className:"flex space-x-3",children:f.jsx("div",{className:"flex-1",children:f.jsxs("div",{className:"relative",children:[f.jsx("input",{type:"text",value:n,onChange:function(e){return t(e.target.value)},placeholder:i,className:"w-full px-3 py-2 bg-gray-100 rounded-full text-sm focus:outline-none focus:bg-white focus:ring-2 focus:ring-blue-500",onKeyPress:function(e){return"Enter"===e.key&&r()}}),n&&f.jsx("button",{onClick:r,className:"absolute right-2 top-1/2 transform -translate-y-1/2 text-blue-600 hover:text-blue-700",children:f.jsx(j,{})})]})})})})}function D(e){var n=e.comments,t=e.newComment,r=e.onCommentChange,o=e.onPostComment,i=e.onLikeComment,a=e.onDeleteComment,s=e.onLikeReply,l=e.onDeleteReply,c=e.onToggleReplies,d=e.onToggleReplyInput,u=e.onPostReply;return f.jsxs("div",{className:"bg-gray-50",children:[f.jsx(A,{value:t,onChange:r,onSubmit:o,placeholder:"Write a comment..."}),f.jsx(_,{comments:n,onLikeComment:i,onDeleteComment:a,onLikeReply:s,onDeleteReply:l,onToggleReplies:c,onToggleReplyInput:d,onPostReply:u})]})}function F(e){var t=this,r=e.author,l=e.content,c=e.tags,d=void 0===c?[]:c,u=e.images,p=void 0===u?[]:u,m=e.extraComponent,h=e.options,g=e.initialLiked,w=void 0!==g&&g,x=e.initialLikeCount,b=void 0===x?0:x,y=e.initialComments,v=void 0===y?[]:y,j=e.showTranslation,k=void 0!==j&&j,N=e.onLikePost,z=e.onAddComment,T=e.onLikeComment,O=e.onDeleteComment,E=e.onAddReply,P=e.onLikeReply,M=e.onDeleteReply,_=e.onClickShare,A=n(w),F=A[0],I=A[1],U=n(b),B=U[0],$=U[1],X=n(!1),W=X[0],Y=X[1],q=n(v),K=q[0],V=q[1],H=n(""),J=H[0],G=H[1];return f.jsxs("div",{className:"bg-white rounded-lg shadow-md overflow-hidden",children:[f.jsx(C,{author:r,options:h,extraComponent:m}),f.jsx(R,{content:l,tags:d,showTranslation:k}),(null==p?void 0:p.length)>0&&f.jsx(S,{images:p}),f.jsx(L,{liked:F,likeCount:B,commentCount:K.length,showComments:W,onLike:function(){var e=!F;I(e),$(e?B+1:B-1),null==N||N(e)},onToggleComments:function(){return Y(!W)},onClickShare:function(){_&&_()}}),W&&f.jsx(D,{comments:K,newComment:J,onCommentChange:G,onPostComment:function(){if(J.trim()&&z){var e=z(J);e&&(V(s([e],K,!0)),G(""))}},onLikeComment:function(e){return i(t,void 0,void 0,function(){var n;return a(this,function(t){switch(t.label){case 0:return t.trys.push([0,3,,4]),V(function(n){return n.map(function(n){return n.id===e?o(o({},n),{liked:!n.liked,likes:n.liked?n.likes-1:n.likes+1}):n})}),T?[4,T(e)]:[3,2];case 1:t.sent(),t.label=2;case 2:return[3,4];case 3:return n=t.sent(),console.error("Failed to like comment:",n),V(function(n){return n.map(function(n){return n.id===e?o(o({},n),{liked:n.liked,likes:n.likes}):n})}),[3,4];case 4:return[2]}})})},onDeleteComment:function(e){return i(t,void 0,void 0,function(){var n,t;return a(this,function(r){switch(r.label){case 0:return r.trys.push([0,3,,4]),s([],K,!0),V(function(n){return n.filter(function(n){return n.id!==e})}),O?[4,O(e)]:[3,2];case 1:r.sent(),r.label=2;case 2:return[3,4];case 3:return n=r.sent(),console.error("Failed to delete comment:",n),t=s([],K,!0),V(function(e){return s(s([],e,!0),t,!0)}),[3,4];case 4:return[2]}})})},onLikeReply:function(e,n){return i(t,void 0,void 0,function(){var t;return a(this,function(r){switch(r.label){case 0:return r.trys.push([0,3,,4]),V(function(t){return t.map(function(t){return t.id===e?o(o({},t),{replies:t.replies.map(function(e){return e.id===n?o(o({},e),{liked:!e.liked,likes:e.liked?e.likes-1:e.likes+1}):e})}):t})}),P?[4,P(e,n)]:[3,2];case 1:r.sent(),r.label=2;case 2:return[3,4];case 3:return t=r.sent(),console.error("Failed to like reply:",t),V(function(t){return t.map(function(t){return t.id===e?o(o({},t),{replies:t.replies.map(function(e){return e.id===n?o(o({},e),{liked:e.liked,likes:e.likes}):e})}):t})}),[3,4];case 4:return[2]}})})},onDeleteReply:function(e,n){return i(t,void 0,void 0,function(){var t,r;return a(this,function(i){switch(i.label){case 0:t=[],i.label=1;case 1:return i.trys.push([1,4,,5]),V(function(r){return r.map(function(r){return r.id===e?(t=r.replies,o(o({},r),{replies:r.replies.filter(function(e){return e.id!==n})})):r})}),M?[4,M(e