react-newsfeed/dist/index.js

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

"use strict";var e=require("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.absolute {\n  position: absolute;\n}\r\n.relative {\n  position: relative;\n}\r\n.inset-0 {\n  inset: 0px;\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.z-10 {\n  z-index: 10;\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.aspect-square {\n  aspect-ratio: 1 / 1;\n}\r\n.h-10 {\n  height: 2.5rem;\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.w-10 {\n  width: 2.5rem;\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.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.-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-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-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-60 {\n  --tw-bg-opacity: 0.6;\n}\r\n.object-cover {\n  -o-object-fit: cover;\n     object-fit: cover;\n}\r\n.p-4 {\n  padding: 1rem;\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-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.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.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-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 n=function(){return n=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},n.apply(this,arguments)};function t(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 r(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 o(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 i,a={exports:{}},s={};var l,c,d={};
/**
 * @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 u(){return l||(l=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 m: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 k:return null!==(t=e.displayName||null)?t:n(e.type)||"Memo";case j: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===j)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,u,m){var h,f=t.children;if(void 0!==f)if(i)if(z(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(R.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}",E[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),E[f+i]=!0)}if(f=null,void 0!==o&&(r(o),f=""+o),function(e){if(R.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:p,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=S.A)?null:h.getOwner(),o,u,m)}function l(e){"object"==typeof e&&null!==e&&e.$$typeof===p&&e._store&&(e._store.validated=1)}var c,u=e,p=Symbol.for("react.transitional.element"),m=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"),k=Symbol.for("react.memo"),j=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),C=Symbol.for("react.client.reference"),S=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,R=Object.prototype.hasOwnProperty,z=Array.isArray,L=console.createTask?console.createTask:function(){return null},T={},O=(u={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(u,i)(),P=L(o(i)),E={};d.Fragment=h,d.jsx=function(e,n,t,r,i){var a=1e4>S.recentlyCreatedOwnerStacks++;return s(e,n,t,!1,0,i,a?Error("react-stack-top-frame"):O,a?L(o(e)):P)},d.jsxs=function(e,n,t,r,i){var a=1e4>S.recentlyCreatedOwnerStacks++;return s(e,n,t,!0,0,i,a?Error("react-stack-top-frame"):O,a?L(o(e)):P)}}()),d}var p=(c||(c=1,"production"===process.env.NODE_ENV?a.exports=function(){if(i)return s;i=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 s.Fragment=n,s.jsx=t,s.jsxs=t,s}():a.exports=u()),a.exports);function m(e){var n=e.filled,t=void 0!==n&&n;return p.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:p.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 h(e){var n=e.direction,t=void 0===n?"":n;return p.jsx("svg",{className:"w-3 h-3 transition-transform ".concat(t),fill:"currentColor",viewBox:"0 0 20 20",children:p.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 f(){return p.jsx("svg",{className:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:p.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 g(){return p.jsx("svg",{className:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:p.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 w(){return p.jsx("svg",{className:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",children:p.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 x(){return p.jsx("svg",{className:"w-3 h-3 ml-1",fill:"currentColor",viewBox:"0 0 20 20",children:p.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 b(){return p.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"24",height:"24",children:p.jsx("path",{fill:"currentColor",d:"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"})})}function y(e){var n=e.src,t=e.alt,r=e.size,o=void 0===r?"md":r;return p.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:p.jsx("img",{src:n,alt:t,className:"w-full h-full object-cover"})})}function v(e){var n=e.time;return p.jsxs("div",{className:"flex items-center space-x-1 text-xs text-gray-500",children:[p.jsx("span",{children:n}),p.jsx(x,{})]})}function k(n){var t=n.author,r=n.options,o=void 0===r?[]:r,i=e.useState(!1),a=i[0],s=i[1],l=e.useRef(null);return e.useEffect(function(){var e=function(e){l.current&&!l.current.contains(e.target)&&s(!1)};return document.addEventListener("mousedown",e),function(){return document.removeEventListener("mousedown",e)}},[]),p.jsxs("div",{className:"flex items-center justify-between p-4 relative",children:[p.jsxs("div",{className:"flex items-center space-x-3",children:[p.jsx(y,{src:t.avatar,alt:t.name,size:"md"}),p.jsxs("div",{children:[p.jsx("h3",{className:"font-semibold text-gray-900 text-sm",children:t.name}),p.jsx(v,{time:t.timeAgo})]})]}),(null==o?void 0:o.length)>0&&p.jsxs(p.Fragment,{children:[p.jsx("button",{className:"text-gray-400 hover:text-gray-600 relative",onClick:function(){return s(!a)},children:p.jsx(w,{})}),a&&o.length>0&&p.jsx("div",{ref:l,className:"absolute right-4 top-12 bg-white shadow-lg rounded-md py-1 w-48 z-10 border border-gray-200",children:o.map(function(e,n){return p.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(),s(!1)},children:[e.icon&&p.jsx("span",{className:"mr-2",children:e.icon}),e.title]},n)})})]})]})}function j(n){var t=n.content,r=n.tags,o=n.showTranslation,i=n.maxLength,a=void 0===i?200:i,s=e.useState(!1),l=s[0],c=s[1],d=t.length>a,u=l?t:"".concat(t.substring(0,a)).concat(d?"...":"");return p.jsxs("div",{className:"px-4 pb-3",children:[p.jsxs("p",{className:"text-gray-900 text-sm leading-relaxed",children:[u,d&&p.jsx("button",{onClick:function(){return c(!l)},className:"text-blue-600 hover:underline ml-1",children:l?"Show less":"Show more"})]}),p.jsx("div",{className:"flex flex-wrap gap-1 mt-2",children:r.map(function(e,n){return p.jsxs("span",{className:"text-blue-600 text-sm hover:underline cursor-pointer",children:["#",e]},n)})}),o&&p.jsx("button",{className:"text-blue-600 text-sm hover:underline mt-2",children:"See translation"})]})}function N(e){var n=e.images;if(0===n.length)return null;if(1===n.length)return p.jsx("div",{className:"w-full",children:p.jsx("img",{src:n[0].url||"/placeholder.svg",alt:n[0].alt,className:"w-full h-auto object-cover cursor-pointer hover:opacity-95 transition-opacity"})});if(2===n.length)return p.jsx("div",{className:"grid grid-cols-2 gap-1",children:n.slice(0,2).map(function(e){return p.jsx("div",{className:"aspect-square overflow-hidden",children:p.jsx("img",{src:e.url||"/placeholder.svg",alt:e.alt,className:"w-full h-full object-cover cursor-pointer hover:opacity-95 transition-opacity"})},e.id)})});if(3===n.length)return p.jsxs("div",{className:"grid grid-cols-2 gap-1",children:[p.jsx("div",{className:"aspect-square overflow-hidden",children:p.jsx("img",{src:n[0].url||"/placeholder.svg",alt:n[0].alt,className:"w-full h-full object-cover cursor-pointer hover:opacity-95 transition-opacity"})}),p.jsx("div",{className:"grid grid-rows-2 gap-1",children:n.slice(1,3).map(function(e){return p.jsx("div",{className:"aspect-square overflow-hidden",children:p.jsx("img",{src:e.url||"/placeholder.svg",alt:e.alt,className:"w-full h-full object-cover cursor-pointer hover:opacity-95 transition-opacity"})},e.id)})})]});var t=n.slice(0,4),r=n.length-4;return p.jsx("div",{className:"grid grid-cols-2 gap-1",children:t.map(function(e,n){return p.jsxs("div",{className:"aspect-square overflow-hidden relative",children:[p.jsx("img",{src:e.url||"/placeholder.svg",alt:e.alt,className:"w-full h-full object-cover cursor-pointer hover:opacity-95 transition-opacity"}),3===n&&r>0&&p.jsx("div",{className:"absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center cursor-pointer hover:bg-opacity-50 transition-all",children:p.jsxs("span",{className:"text-white text-2xl font-bold",children:["+",r]})})]},e.id)})})}function C(e){var n=e.liked,t=e.likeCount,r=e.commentCount;e.showComments;var o=e.onLike,i=e.onToggleComments,a=e.onClickShare;return p.jsxs(p.Fragment,{children:[p.jsx("div",{className:"px-4 py-3 border-b border-gray-200",children:p.jsxs("div",{className:"flex items-center justify-between",children:[p.jsxs("div",{className:"flex items-center space-x-1",children:[p.jsx("div",{className:"flex -space-x-1",children:p.jsx("div",{className:"w-5 h-5 rounded-full flex items-center justify-center text-white text-xs",children:"👍"})}),p.jsxs("span",{className:"text-gray-600 text-sm ml-2",children:[t," Likes"]})]}),p.jsxs("button",{onClick:i,className:"text-gray-600 text-sm hover:underline",children:[r," Comments"]})]})}),p.jsx("div",{className:"px-4 py-2 border-b border-gray-200",children:p.jsxs("div",{className:"flex justify-around",children:[p.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:[p.jsx(m,{filled:n}),p.jsx("span",{className:"text-sm font-medium",children:"Like"})]}),p.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:[p.jsx(f,{}),p.jsx("span",{className:"text-sm font-medium",children:"Comment"})]}),p.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:[p.jsx(g,{}),p.jsx("span",{className:"text-sm font-medium",children:"Share"})]})]})})]})}function S(e){var n=e.liked,t=e.count,r=e.onClick;return p.jsxs("button",{onClick:r,className:"flex items-center space-x-1 ".concat(n?"text-blue-600 font-semibold":""),children:[p.jsx("span",{children:"👍"}),t>0&&p.jsx("span",{children:t}),p.jsx("span",{children:"Like"})]})}function R(e){var n=e.reply,t=e.onLike;return p.jsxs("div",{className:"flex space-x-2",children:[p.jsx(y,{src:n.avatar,alt:n.author,size:"sm"}),p.jsxs("div",{className:"flex-1",children:[p.jsxs("div",{className:"bg-gray-100 rounded-2xl px-3 py-2",children:[p.jsx("h5",{className:"font-semibold text-xs text-gray-900",children:n.author}),p.jsx("p",{className:"text-xs text-gray-800 mt-1",children:n.content})]}),p.jsxs("div",{className:"flex items-center space-x-3 mt-1 text-xs text-gray-500",children:[p.jsx(S,{liked:n.liked,count:n.likes,onClick:t}),p.jsx(v,{time:n.timestamp})]})]})]})}function z(e){var n=e.replies,t=e.showReplies,r=e.onToggleReplies,o=e.onLikeReply;return p.jsxs("div",{className:"mt-2",children:[p.jsxs("button",{onClick:r,className:"text-xs text-gray-500 hover:underline flex items-center space-x-1",children:[p.jsx(h,{direction:t?"rotate-90":""}),p.jsxs("span",{children:[n.length," ",1===n.length?"reply":"replies"]})]}),t&&p.jsx("div",{className:"mt-2 space-y-2",children:n.map(function(e){return p.jsx(R,{reply:e,onLike:function(){return o(e.id)}},e.id)})})]})}function L(e){var n=e.value,t=e.onChange,r=e.onSubmit,o=e.placeholder,i=void 0===o?"Write a reply...":o;return p.jsxs("div",{className:"flex space-x-2 mt-2",children:[p.jsx("div",{className:"flex-1",children:p.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&&p.jsx("button",{onClick:r,className:"text-blue-600 hover:text-blue-700 text-sm",children:p.jsx(b,{})})]})}function T(n){var t=n.comment,r=n.onLike,o=n.onLikeReply,i=n.onToggleReplies,a=n.onToggleReplyInput,s=n.onPostReply,l=e.useState(""),c=l[0],d=l[1];return p.jsx("div",{className:"p-4 border-b border-gray-200",children:p.jsxs("div",{className:"flex space-x-3",children:[p.jsx(y,{src:t.avatar,alt:t.author,size:"sm"}),p.jsxs("div",{className:"flex-1",children:[p.jsxs("div",{className:"bg-gray-100 rounded-2xl px-3 py-2",children:[p.jsx("h4",{className:"font-semibold text-sm text-gray-900",children:t.author}),p.jsx("p",{className:"text-sm text-gray-800 mt-1",children:t.content})]}),p.jsxs("div",{className:"flex items-center space-x-4 mt-1 text-xs text-gray-500",children:[t.likes>0&&p.jsxs("span",{className:"flex items-center space-x-1",children:[p.jsx("span",{children:"👍"}),p.jsx("span",{children:t.likes})]}),p.jsx("button",{onClick:r,className:"hover:underline ".concat(t.liked?"text-blue-600 font-semibold":""),children:"Like"}),p.jsx("button",{onClick:a,className:"hover:underline",children:"Reply"}),p.jsx(v,{time:t.timestamp})]}),t.showReplyInput&&p.jsx(L,{value:c,onChange:d,onSubmit:function(){c.trim()&&(s(c),d(""))},placeholder:"Write a reply..."}),t.replies.length>0&&p.jsx(z,{replies:t.replies,showReplies:t.showReplies,onToggleReplies:i,onLikeReply:o})]})]})})}function O(e){var n=e.comments,t=e.onLikeComment,r=e.onLikeReply,o=e.onToggleReplies,i=e.onToggleReplyInput,a=e.onPostReply;return p.jsx("div",{className:"max-h-96 overflow-y-auto",children:n.map(function(e){return p.jsx(T,{comment:e,onLike:function(){return t(e.id)},onLikeReply:function(n){return r(e.id,n)},onToggleReplies:function(){return o(e.id)},onToggleReplyInput:function(){return i(e.id)},onPostReply:function(n){return a(e.id,n)}},e.id)})})}function P(e){var n=e.value,t=e.onChange,r=e.onSubmit,o=e.placeholder,i=void 0===o?"Write a comment...":o;return p.jsx("div",{className:"p-4 border-b border-gray-200",children:p.jsx("div",{className:"flex space-x-3",children:p.jsx("div",{className:"flex-1",children:p.jsxs("div",{className:"relative",children:[p.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&&p.jsx("button",{onClick:r,className:"absolute right-2 top-1/2 transform -translate-y-1/2 text-blue-600 hover:text-blue-700",children:p.jsx(b,{})})]})})})})}function E(e){var n=e.comments,t=e.newComment,r=e.onCommentChange,o=e.onPostComment,i=e.onLikeComment,a=e.onLikeReply,s=e.onToggleReplies,l=e.onToggleReplyInput,c=e.onPostReply;return p.jsxs("div",{className:"bg-gray-50",children:[p.jsx(P,{value:t,onChange:r,onSubmit:o,placeholder:"Write a comment..."}),p.jsx(O,{comments:n,onLikeComment:i,onLikeReply:a,onToggleReplies:s,onToggleReplyInput:l,onPostReply:c})]})}exports.Avatar=y,exports.ChevronIcon=h,exports.Comment=T,exports.CommentIcon=f,exports.CommentInput=P,exports.CommentList=O,exports.LikeButton=S,exports.LikeIcon=m,exports.MoreOptionsIcon=w,exports.Post=function(i){var a=this,s=i.author,l=i.content,c=i.tags,d=void 0===c?[]:c,u=i.images,m=void 0===u?[]:u,h=i.options,f=i.initialLiked,g=void 0!==f&&f,w=i.initialLikeCount,x=void 0===w?0:w,b=i.initialComments,y=void 0===b?[]:b,v=i.showTranslation,S=void 0!==v&&v,R=i.onLikePost,z=i.onAddComment,L=i.onLikeComment,T=i.onAddReply,O=i.onLikeReply,P=i.onClickShare,_=e.useState(g),I=_[0],A=_[1],M=e.useState(x),F=M[0],U=M[1],$=e.useState(!1),B=$[0],W=$[1],X=e.useState(y),Y=X[0],q=X[1],D=e.useState(""),K=D[0],V=D[1];return p.jsxs("div",{className:"bg-white rounded-lg shadow-md overflow-hidden",children:[p.jsx(k,{author:s,options:h}),p.jsx(j,{content:l,tags:d,showTranslation:S}),(null==m?void 0:m.length)>0&&p.jsx(N,{images:m}),p.jsx(C,{liked:I,likeCount:F,commentCount:Y.length,showComments:B,onLike:function(){var e=!I;A(e),U(e?F+1:F-1),null==R||R(e)},onToggleComments:function(){return W(!B)},onClickShare:function(){P&&P()}}),B&&p.jsx(E,{comments:Y,newComment:K,onCommentChange:V,onPostComment:function(){if(K.trim()&&z){var e=z(K);e&&(q(o([e],Y,!0)),V(""))}},onLikeComment:function(e){return t(a,void 0,void 0,function(){var t;return r(this,function(r){switch(r.label){case 0:return r.trys.push([0,3,,4]),q(function(t){return t.map(function(t){return t.id===e?n(n({},t),{liked:!t.liked,likes:t.liked?t.likes-1:t.likes+1}):t})}),L?[4,L(e)]:[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 comment:",t),q(function(t){return t.map(function(t){return t.id===e?n(n({},t),{liked:t.liked,likes:t.likes}):t})}),[3,4];case 4:return[2]}})})},onLikeReply:function(e,o){return t(a,void 0,void 0,function(){var t;return r(this,function(r){switch(r.label){case 0:return r.trys.push([0,3,,4]),q(function(t){return t.map(function(t){return t.id===e?n(n({},t),{replies:t.replies.map(function(e){return e.id===o?n(n({},e),{liked:!e.liked,likes:e.liked?e.likes-1:e.likes+1}):e})}):t})}),O?[4,O(e,o)]:[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),q(function(t){return t.map(function(t){return t.id===e?n(n({},t),{replies:t.replies.map(function(e){return e.id===o?n(n({},e),{liked:e.liked,likes:e.likes}):e})}):t})}),[3,4];case 4:return[2]}})})},onToggleReplies:function(e){q(Y.map(function(t){return t.id===e?n(n({},t),{showReplies:!t.showReplies}):t}))},onToggleReplyInput:function(e){q(Y.map(function(t){return t.id===e?n(n({},t),{showReplyInput:!t.showReplyInput}):t}))},onPostReply:function(e,i){return t(a,void 0,void 0,function(){var t,a;return r(this,function(r){switch(r.label){case 0:if(!i.trim()||!T)return[2];r.label=1;case 1:return r.trys.push([1,3,,4]),[4,T(e,i)];case 2:return t=r.sent(),q(function(r){return r.map(function(r){return r.id===e?n(n({},r),{replies:o(o([],r.replies,!0),[t],!1),showReplies:!0,showReplyInput:!1}):r})}),[3,4];case 3:return a=r.sent(),console.error("Failed to add reply:",a),[3,4];case 4:return[2]}})})}})]})},exports.PublicIcon=x,exports.Reply=R,exports.ReplyInput=L,exports.ReplyList=z,exports.SendIcon=b,exports.ShareIcon=g,exports.TimeStamp=v;
//# sourceMappingURL=index.js.map