"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[846],{"./src/components/ui/DemoBadge/DemoBadge.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{DarkMode:()=>DarkMode,Default:()=>Default,InTableRow:()=>InTableRow,LightAndDarkComparison:()=>LightAndDarkComparison,Medium:()=>Medium,SizeComparison:()=>SizeComparison,Small:()=>Small,WithCustomClassName:()=>WithCustomClassName,WithOrderNumber:()=>WithOrderNumber,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js"),_index__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/ui/DemoBadge/index.tsx");const __WEBPACK_DEFAULT_EXPORT__={title:"UI/DemoBadge",component:_index__WEBPACK_IMPORTED_MODULE_1__.d,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{size:{control:"select",options:["sm","md"],description:"Size of the badge"},className:{control:"text",description:"Additional CSS classes"}}},Default={args:{}},Small={args:{size:"sm"}},Medium={args:{size:"md"}},SizeComparison={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"flex items-center gap-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"text-center",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{className:"text-xs text-gray-500 mb-2",children:"Small"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.d,{size:"sm"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"text-center",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{className:"text-xs text-gray-500 mb-2",children:"Medium"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.d,{size:"md"})]})]})},WithOrderNumber={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"flex items-center gap-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span",{className:"font-semibold text-gray-900 dark:text-gray-100",children:"Order #12345"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.d,{})]}),parameters:{docs:{description:{story:"Typical usage: badge displayed next to an order number"}}}},InTableRow={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("table",{className:"min-w-full divide-y divide-gray-200 dark:divide-gray-700",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("thead",{className:"bg-gray-50 dark:bg-gray-800",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("tr",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("th",{className:"px-4 py-3 text-left text-sm font-medium text-gray-600 dark:text-gray-400",children:"Order"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("th",{className:"px-4 py-3 text-left text-sm font-medium text-gray-600 dark:text-gray-400",children:"Date"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("th",{className:"px-4 py-3 text-left text-sm font-medium text-gray-600 dark:text-gray-400",children:"Status"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("th",{className:"px-4 py-3 text-right text-sm font-medium text-gray-600 dark:text-gray-400",children:"Total"})]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("tbody",{className:"divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-900",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("tr",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("td",{className:"px-4 py-4",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"flex items-center gap-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span",{className:"font-semibold text-gray-900 dark:text-gray-100",children:"#12345"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.d,{})]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("td",{className:"px-4 py-4 text-gray-600 dark:text-gray-400",children:"Dec 5, 2024"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("td",{className:"px-4 py-4",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span",{className:"px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",children:"Delivered"})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("td",{className:"px-4 py-4 text-right font-semibold text-gray-900 dark:text-gray-100",children:"$299.99"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("tr",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("td",{className:"px-4 py-4",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"flex items-center gap-2",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span",{className:"font-semibold text-gray-900 dark:text-gray-100",children:"#12344"})})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("td",{className:"px-4 py-4 text-gray-600 dark:text-gray-400",children:"Dec 4, 2024"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("td",{className:"px-4 py-4",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span",{className:"px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",children:"Processing"})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("td",{className:"px-4 py-4 text-right font-semibold text-gray-900 dark:text-gray-100",children:"$149.99"})]})]})]})}),parameters:{docs:{description:{story:"Shows how the badge appears in a typical orders table. Notice the first order is a demo order."}}}},DarkMode={args:{},parameters:{backgrounds:{default:"dark"}},decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"dark p-4 bg-gray-900 rounded-lg",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})]},LightAndDarkComparison={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"flex gap-8",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"p-4 bg-white rounded-lg",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{className:"text-xs text-gray-500 mb-2",children:"Light Mode"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.d,{})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"dark p-4 bg-gray-900 rounded-lg",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{className:"text-xs text-gray-400 mb-2",children:"Dark Mode"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.d,{})]})]})},WithCustomClassName={args:{className:"ml-2 shadow-sm"},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"flex items-center",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span",{className:"font-bold text-lg text-gray-900 dark:text-gray-100",children:"Order Details"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.d,{...args})]})},__namedExportsOrder=["Default","Small","Medium","SizeComparison","WithOrderNumber","InTableRow","DarkMode","LightAndDarkComparison","WithCustomClassName"]},"./src/components/ui/DemoBadge/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{d:()=>DemoBadge});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js");function DemoBadge({className="",size="sm"}){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span",{className:`inline-flex items-center rounded-full font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 ${{sm:"px-2 py-0.5 text-xs",md:"px-3 py-1 text-sm"}[size]} ${className}`,children:"Demo"})}}}]);