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 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 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 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 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 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 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 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 MainComponent() { const initialData = [ { id: 1, company: { src: "https://logo.clearbit.com/apple.com", businessName: "Apple Inc.", website: "www.apple.com" }, status: "Customer", about: { title: "Innovation and Technology", subtitle: "Revolutionizing technology." }, users: 5, licenseUse: 95 }, { id: 2, company: { src: "https://logo.clearbit.com/google.com", businessName: "Google LLC", website: "www.google.com" }, status: "Customer", about: { title: "Internet Services", subtitle: "Improving information access." }, users: 4, licenseUse: 90 }, { id: 3, company: { src: "https://logo.clearbit.com/microsoft.com", businessName: "Microsoft", website: "www.microsoft.com" }, status: "Churned", about: { title: "Software Development", subtitle: "Empowering through software." }, users: 3, licenseUse: 75 }, { id: 4, company: { src: "https://logo.clearbit.com/amazon.com", businessName: "Amazon", website: "www.amazon.com" }, status: "Customer", about: { title: "E-commerce and Cloud", subtitle: "Redefining commerce." }, users: 6, licenseUse: 80 } ].map((item)=>({ ...item, checked: false, deleteHover: false, editState: false })); 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(React.Fragment, null), /*#__PURE__*/ React.createElement(BusinessName, { key: `business-${id}`, ...company, __source: { fileName: "", lineNumber: 40, columnNumber: 9 } }), /*#__PURE__*/ React.createElement(Label, { key: `status-${id}`, label: status, isSelected: status === "Customer", __source: { fileName: "", lineNumber: 41, columnNumber: 9 } }), /*#__PURE__*/ React.createElement(Text, { key: `about-${id}`, ...about, __source: { fileName: "", lineNumber: 42, columnNumber: 9 } }), /*#__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: 43, columnNumber: 9 } }), /*#__PURE__*/ React.createElement(ProgressBar, { key: `license-${id}`, progressPercentage: licenseUse, __source: { fileName: "", lineNumber: 44, columnNumber: 9 } }), /*#__PURE__*/ React.createElement("div", { key: `delete-${id}`, onMouseEnter: ()=>toggleHover(id, 'deleteHover'), onMouseLeave: ()=>toggleHover(id, 'deleteHover'), onClick: ()=>deleteRow(id), __source: { fileName: "", lineNumber: 45, columnNumber: 9 } }, /*#__PURE__*/ React.createElement(DeleteIcon, { hover: deleteHover, __source: { fileName: "", lineNumber: 46, columnNumber: 11 } })), /*#__PURE__*/ React.createElement("div", { key: `edit-${id}`, onMouseEnter: ()=>toggleHover(id, 'editState'), onMouseLeave: ()=>toggleHover(id, 'editState'), onClick: ()=>handleEdit(id), __source: { fileName: "", lineNumber: 48, columnNumber: 9 } }, /*#__PURE__*/ React.createElement(EditIcon, { hover: editState, __source: { fileName: "", lineNumber: 49, columnNumber: 11 } })) ]), __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }); }

Company	Status	About	Users
Apple Inc. www.apple.com	Customer	Innovation and Technology Revolutionizing technology.
Google LLC www.google.com	Customer	Internet Services Improving information access.
Microsoft www.microsoft.com	Churned	Software Development Empowering through software.
Amazon www.amazon.com	Customer	E-commerce and Cloud Redefining commerce.	+1