function Label({ label, isSelected }) { const bgColor = isSelected ? 'bg-[#ECFDF3]' : 'bg-[#F2F4F7]'; const textColor = isSelected ? 'text-[#027A48]' : 'text-[#344054]'; return /*#__PURE__*/ React.createElement("div", { className: `${bgColor} ${textColor} font-inter font-medium text-[12px] px-[8px] py-[2px] rounded-[16px] inline-block`, __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, label); } function LabelStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Label, { label: "Selected Label", isSelected: true, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Label, { label: "Unselected Label", isSelected: false, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function DeleteIcon({ hover = false }) { return /*#__PURE__*/ React.createElement("div", { className: `w-[40px] h-[40px] rounded-[8px] ${hover ? 'bg-[#FEF3F2]' : ''} flex items-center justify-center`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M13.3333 4.99996V4.33329C13.3333 3.39987 13.3333 2.93316 13.1517 2.57664C12.9919 2.26304 12.7369 2.00807 12.4233 1.84828C12.0668 1.66663 11.6001 1.66663 10.6667 1.66663H9.33333C8.39991 1.66663 7.9332 1.66663 7.57668 1.84828C7.26308 2.00807 7.00811 2.26304 6.84832 2.57664C6.66667 2.93316 6.66667 3.39987 6.66667 4.33329V4.99996M8.33333 9.58329V13.75M11.6667 9.58329V13.75M2.5 4.99996H17.5M15.8333 4.99996V14.3333C15.8333 15.7334 15.8333 16.4335 15.5608 16.9683C15.3212 17.4387 14.9387 17.8211 14.4683 18.0608C13.9335 18.3333 13.2335 18.3333 11.8333 18.3333H8.16667C6.76654 18.3333 6.06647 18.3333 5.53169 18.0608C5.06129 17.8211 4.67883 17.4387 4.43915 16.9683C4.16667 16.4335 4.16667 15.7334 4.16667 14.3333V4.99996", stroke: "#475467", strokeWidth: "1.66667", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }))); } function DeleteIconStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DeleteIcon, { __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DeleteIcon, { hover: true, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function ProgressBar({ progressPercentage }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[128px] h-[8px] bg-[#EAECF0] rounded-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-[#7F56D9] rounded-full", style: { width: `${progressPercentage}%` }, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function ProgressBarStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProgressBar, { progressPercentage: 25, __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progressPercentage: 50, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progressPercentage: 75, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progressPercentage: 100, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function Text({ title, subtitle }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-0", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-inter font-normal text-[14px] text-[#101828]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-inter font-normal text-[14px] text-[#475467]", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, subtitle)); } function TextStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Text, { title: "Updated Title Example", subtitle: "Updated Subtitle Example", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function AvatarStack({ avatars }) { const displayAvatars = avatars.slice(0, 5); const remainingCount = avatars.length - 5; return /*#__PURE__*/ React.createElement("div", { className: "flex -space-x-4", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, displayAvatars.map((avatar, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: avatar, alt: `User avatar ${index + 1}`, className: "w-8 h-8 rounded-full border-2 border-white", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this })), remainingCount > 0 && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center w-8 h-8 rounded-full bg-[#F2F4F7] text-[#475467] font-inter text-[12px] font-medium", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "+", remainingCount)); } function AvatarStackStory() { const exampleSets = [ [ "./avatar1.png" ], [ "./avatar1.png", "./avatar2.png" ], [ "./avatar1.png", "./avatar2.png", "./avatar3.png" ], [ "./avatar1.png", "./avatar2.png", "./avatar3.png", "./avatar4.png" ], [ "./avatar1.png", "./avatar2.png", "./avatar3.png", "./avatar4.png", "./avatar5.png" ], [ "./avatar1.png", "./avatar2.png", "./avatar3.png", "./avatar4.png", "./avatar5.png", "./avatar6.png" ], [ "./avatar1.png", "./avatar2.png", "./avatar3.png", "./avatar4.png", "./avatar5.png", "./avatar6.png", "./avatar7.png" ] ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, exampleSets.map((set, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(AvatarStack, { avatars: set, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this })))); } function EditIcon({ hover }) { return /*#__PURE__*/ React.createElement("div", { className: `w-[40px] h-[40px] rounded-[8px] flex items-center justify-center ${hover ? 'bg-[#F9F5FF]' : 'bg-transparent'} text-[#475467]`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M2.39662 15.0964C2.43491 14.7518 2.45405 14.5795 2.50618 14.4185C2.55243 14.2756 2.61778 14.1397 2.70045 14.0143C2.79363 13.873 2.91621 13.7504 3.16136 13.5053L14.1666 2.50005C15.0871 1.57957 16.5795 1.57957 17.4999 2.50005C18.4204 3.42052 18.4204 4.91291 17.4999 5.83338L6.49469 16.8386C6.24954 17.0838 6.12696 17.2063 5.98566 17.2995C5.86029 17.3822 5.72433 17.4475 5.58146 17.4938C5.42042 17.5459 5.24813 17.5651 4.90356 17.6033L2.08325 17.9167L2.39662 15.0964Z", stroke: "#475467", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }))); } function EditIconStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-x-4 flex", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EditIcon, { hover: false, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(EditIcon, { hover: true, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function Table({ titles, data }) { return /*#__PURE__*/ React.createElement("div", { className: "shadow-lg rounded-md border border-[#EAECF0]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, titles.map((title, index)=>/*#__PURE__*/ React.createElement("th", { key: index, className: "text-left text-[#475467] bg-[#F9FAFB] font-inter font-medium text-[12px] p-4", __source: { fileName: "", lineNumber: 8, columnNumber: 15 }, __self: this }, title)))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, data.map((rowData, rowIndex)=>/*#__PURE__*/ React.createElement("tr", { key: rowIndex, className: "border-b border-[#EAECF0]", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, rowData.map((cellData, cellIndex)=>/*#__PURE__*/ React.createElement("td", { key: cellIndex, className: "text-[#475467] font-inter text-[12px] py-4 pl-4 pr-2", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this }, cellData))))))); } function TableStory() { const titles = [ "Name", "Role", "Status" ]; const data = [ [ "John Doe", "Admin", "Active" ], [ "Jane Smith", "Moderator", "Inactive" ], [ "John Appleseed", "User", "Active" ], [ "Steve Jobs", "CEO", "Active" ] ]; return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Table, { titles: titles, data: data, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this })); } function Checkbox({ checked, onClick }) { return /*#__PURE__*/ React.createElement("div", { onClick: onClick, className: `w-[20px] h-[20px] rounded-[6px] border-[1px] cursor-pointer ${checked ? 'border-[#7f56d9] bg-[#f9f5ff]' : 'border-[#d0d5dd] bg-transparent'} flex items-center justify-center`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, checked && /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-[#7f56d9]", __source: { fileName: "", lineNumber: 4, columnNumber: 19 }, __self: this })); } function CheckboxStory() { const dataSeries = [ { id: 1, checked: true }, { id: 2, checked: false } ]; return /*#__PURE__*/ React.createElement("div", { className: "space-x-4 flex", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, dataSeries.map(({ id, checked })=>/*#__PURE__*/ React.createElement(Checkbox, { key: id, checked: checked, __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }))); } function BusinessName({ src, businessName, website }) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-3", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: src, alt: `${businessName} logo`, className: "w-[40px] h-[40px] rounded-full", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-inter font-medium text-[14px] text-[#101828]", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, businessName), /*#__PURE__*/ React.createElement("p", { className: "font-inter font-normal text-[14px] text-[#475467]", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, website))); } function BusinessNameStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-12", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BusinessName, { src: "path/to/firstBusinessLogo.png", alt: "Logo of the first business", businessName: "Sunrise Bakery", website: "www.sunrisebakery.com", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BusinessName, { src: "path/to/secondBusinessLogo.png", alt: "Logo of the second business", businessName: "Moonlight Cafe", website: "www.moonlightcafe.com", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BusinessName, { src: "path/to/thirdBusinessLogo.png", alt: "Logo of the third business", businessName: "Starlight Fashion", website: "www.starlightfashion.com", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function MainComponent() { const initialData = [ { id: 1, company: { src: "https://logo.clearbit.com/apple.com", businessName: "Apple Inc.", website: "www.apple.com" }, status: "Customer", about: { title: "Innovative Tech", subtitle: "Leading in technology innovation" }, users: 5, licenseUse: 80 }, { id: 2, company: { src: "https://logo.clearbit.com/google.com", businessName: "Google LLC", website: "www.google.com" }, status: "Churned", about: { title: "Search & AI", subtitle: "Pioneering AI research" }, users: 3, licenseUse: 60 }, { id: 3, company: { src: "https://logo.clearbit.com/microsoft.com", businessName: "Microsoft", website: "www.microsoft.com" }, status: "Customer", about: { title: "Software Solutions", subtitle: "Empowering businesses worldwide" }, users: 4, licenseUse: 90 }, { id: 4, company: { src: "https://logo.clearbit.com/amazon.com", businessName: "Amazon", website: "www.amazon.com" }, status: "Churned", about: { title: "E-commerce Giant", subtitle: "From books to everything" }, users: 2, licenseUse: 50 }, { id: 5, company: { src: "https://logo.clearbit.com/cocacola.com", businessName: "Coca-Cola", website: "www.coca-cola.com" }, status: "Customer", about: { title: "Beverage Corporation", subtitle: "Refreshing the world" }, users: 3, licenseUse: 50 } ]; const [data, setData] = React.useState(initialData); const toggleCheck = (id)=>setData(data.map((item)=>item.id === id ? { ...item, checked: !item.checked } : item)); const deleteRow = (id)=>setData(data.filter((item)=>item.id !== id)); const toggleHover = (id, type)=>setData(data.map((item)=>item.id === id ? { ...item, [type]: !item[type] } : item)); const handleEdit = (id)=>{ const editableRow = data.find((item)=>item.id === id); const newAboutTitle = prompt("Edit About Title:", editableRow.about.title); const newAboutSubtitle = prompt("Edit About Subtitle:", editableRow.about.subtitle); if (newAboutTitle && newAboutSubtitle) { setData(data.map((item)=>item.id === id ? { ...item, about: { ...item.about, title: newAboutTitle, subtitle: newAboutSubtitle } } : item)); } }; const titles = [ "", "Company", "Status", "About", "Users", "License Use", "", "" ]; return /*#__PURE__*/ React.createElement(Table, { titles: titles, data: data.map(({ id, checked, company, status, about, users, licenseUse, deleteHover, editState })=>[ /*#__PURE__*/ React.createElement(Checkbox, { key: `checkbox-${id}`, checked: !!checked, onClick: ()=>toggleCheck(id), __source: { fileName: "", lineNumber: 34, columnNumber: 7 } }), /*#__PURE__*/ React.createElement(BusinessName, { key: `business-${id}`, ...company, __source: { fileName: "", lineNumber: 35, columnNumber: 7 } }), /*#__PURE__*/ React.createElement(Label, { key: `status-${id}`, label: status, isSelected: status === "Customer", __source: { fileName: "", lineNumber: 36, columnNumber: 7 } }), /*#__PURE__*/ React.createElement(Text, { key: `about-${id}`, ...about, __source: { fileName: "", lineNumber: 37, columnNumber: 7 } }), /*#__PURE__*/ React.createElement(AvatarStack, { key: `users-${id}`, avatars: Array.from({ length: users }, (_, index)=>`https://source.unsplash.com/random/?professional%20headshot&${id}${index}`), __source: { fileName: "", lineNumber: 38, columnNumber: 7 } }), /*#__PURE__*/ React.createElement(ProgressBar, { key: `license-${id}`, progressPercentage: licenseUse, __source: { fileName: "", lineNumber: 39, columnNumber: 7 } }), /*#__PURE__*/ React.createElement("div", { key: `delete-${id}`, onMouseEnter: ()=>toggleHover(id, 'deleteHover'), onMouseLeave: ()=>toggleHover(id, 'deleteHover'), onClick: ()=>deleteRow(id), __source: { fileName: "", lineNumber: 40, columnNumber: 7 } }, /*#__PURE__*/ React.createElement(DeleteIcon, { hover: !!deleteHover, __source: { fileName: "", lineNumber: 41, columnNumber: 9 } })), /*#__PURE__*/ React.createElement("div", { key: `edit-${id}`, onMouseEnter: ()=>toggleHover(id, 'editState'), onMouseLeave: ()=>toggleHover(id, 'editState'), onClick: ()=>handleEdit(id), __source: { fileName: "", lineNumber: 43, columnNumber: 7 } }, /*#__PURE__*/ React.createElement(EditIcon, { hover: !!editState, __source: { fileName: "", lineNumber: 44, columnNumber: 9 } })) ]), __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }); }

Company	Status	About
Apple Inc. www.apple.com	Customer	Innovative Tech Leading in technology innovation
Google LLC www.google.com	Churned	Search & AI Pioneering AI research
Microsoft www.microsoft.com	Customer	Software Solutions Empowering businesses worldwide
Amazon www.amazon.com	Churned	E-commerce Giant From books to everything
Coca-Cola www.coca-cola.com	Customer	Beverage Corporation Refreshing the world