ekm-ui 0.3.0 → 0.3.2

package/dist/stacked-list-item.mjs

@@ -1,43 +1,48 @@
-export { a as StackedListItem } from './chunk-IUZHBHDJ.mjs';
+export { a as StackedListItem } from './chunk-OZBN2ZC6.mjs';
+import './chunk-3ZCDEN7B.mjs';
+import './chunk-HDNA6QBW.mjs';
+import './chunk-HAQTLD4G.mjs';
+import './chunk-X6GXSTW7.mjs';
 import './chunk-ZHHTK7UM.mjs';
 import './chunk-QWPN2UNV.mjs';
+import './chunk-RMX72FR3.mjs';
+import './chunk-NI4IFVX3.mjs';
+import './chunk-25FJ277C.mjs';
 import './chunk-FAFXVD4P.mjs';
 import './chunk-256SAVHD.mjs';
 import './chunk-VPLCWU7T.mjs';
-import './chunk-3ZCDEN7B.mjs';
-import './chunk-HDNA6QBW.mjs';
-import './chunk-HAQTLD4G.mjs';
-import './chunk-X6GXSTW7.mjs';
+import './chunk-EIUBW4B6.mjs';
+import './chunk-B2KVPYRJ.mjs';
+import './chunk-OT256LE6.mjs';
 import './chunk-FJQEJBBY.mjs';
+import './chunk-UVKFEZEW.mjs';
 import './chunk-EWNPNF2B.mjs';
 import './chunk-YQAMEBON.mjs';
 import './chunk-EQANFKDN.mjs';
-import './chunk-RMX72FR3.mjs';
-import './chunk-NI4IFVX3.mjs';
-import './chunk-25FJ277C.mjs';
+import './chunk-ZT7KDTGF.mjs';
+import './chunk-WU66HPYP.mjs';
+import './chunk-FRIXS4BL.mjs';
 import './chunk-LWDFKEBO.mjs';
 import './chunk-PJMH47GY.mjs';
 import './chunk-KAQJAKQH.mjs';
 import './chunk-BIU2AAPZ.mjs';
-import './chunk-B2KVPYRJ.mjs';
-import './chunk-OT256LE6.mjs';
-import './chunk-FRIXS4BL.mjs';
+import './chunk-VASBTVLS.mjs';
 import './chunk-YTTLKTRL.mjs';
 import './chunk-T2OVPC6F.mjs';
 import './chunk-2IZBG5JT.mjs';
 import './chunk-ZPLTGYYM.mjs';
 import './chunk-QRNTMHBL.mjs';
 import './chunk-ER4YVWM3.mjs';
-import './chunk-ZT7KDTGF.mjs';
-import './chunk-WU66HPYP.mjs';
 import './chunk-NS6AVKX7.mjs';
+import './chunk-BISZCSUR.mjs';
 import './chunk-O3QYDTAF.mjs';
-import './chunk-664HOPW7.mjs';
+import './chunk-EWY53DIV.mjs';
+import './chunk-H33QAJXR.mjs';
+import './chunk-UGSJ7PI7.mjs';
 import './chunk-S7V4MUJ2.mjs';
+import './chunk-QTAUYFKM.mjs';
 import './chunk-SAXGEQRG.mjs';
 import './chunk-LN7UO7PK.mjs';
-import './chunk-VASBTVLS.mjs';
-import './chunk-QTAUYFKM.mjs';
 import './chunk-RUPJ2ZHA.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=stacked-list-item.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ekm-ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "sideEffects": [
     "**/*.css"
   ],

package/src/alert-banner.tsx

@@ -0,0 +1,98 @@
+//@ts-nocheck
+
+import { variantProps } from 'classname-variants/react'
+import { FaTimes } from 'react-icons/fa'
+import { FaTimes, FaInfoCircle, FaCheckCircle, FaExclamationCircle, FaExclamationTriangle } from 'react-icons/fa'
+import PropTypes from 'prop-types'
+
+const alertProps = variantProps({
+  base: 'flex p-4 mb-4',
+  variants: {
+    type: {
+      info: 'text-blue-800 border border-blue-300 bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800',
+      default: 'text-gray-800 border border-gray-300 bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-800',
+      success: 'text-green-800 border border-green-300 bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800',
+      danger: 'text-red-800 border border-red-300 bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800',
+      warning: 'text-yellow-800 border border-yellow-300 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-400 dark:border-yellow-800',
+    },
+    size: {
+      sm: 'text-sm',
+      md: 'text-md',
+      lg: 'text-lg',
+    },
+    rounded: {
+      true: 'rounded-lg',
+      false: 'rounded-none',
+    },
+    defaultVariants: {
+      type: 'info',
+      rounded: true,
+      size: 'md',
+    },
+  },
+})
+
+const dismissProps = variantProps({
+  base: 'ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8',
+  variants: {
+    type: {
+      info: ' bg-blue-50 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700',
+      default: ' bg-grey-50 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700',
+      success: ' bg-green-50 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:bg-green-800 dark:text-green-400 dark:hover:bg-gray-700',
+      danger: ' bg-red-50 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700',
+      warning: ' bg-yellow-50 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:bg-gray-800 dark:text-yellow-400 dark:hover:bg-gray-700',
+    },
+  },
+})
+
+export function AlertBanner({ children, type, showIcon, onDismiss, rounded}) {
+
+  const renderIcon = () => {
+    switch (type) {
+      case 'info':
+        return <FaInfoCircle />
+      case 'success':
+        return <FaCheckCircle />
+      case 'danger':
+        return <FaExclamationCircle />
+      case 'warning':
+        return <FaExclamationTriangle />
+      default:
+        return <FaInfoCircle />
+    }
+  }
+
+  return (
+    <div {...alertProps({ type, rounded })} role="alert">
+      {showIcon && <div className="flex-shrink-0 inline w-4 h-4 mr-3 mt-1">{renderIcon()}</div>}
+      <span className="sr-only">{type}</span>
+      {children && <div>{children}</div>}
+
+      {onDismiss && (
+        <button type="button" {...dismissProps({ type })} data-dismiss-target="#alert-1" aria-label="Close" onClick={onDismiss}>
+          <span className="sr-only">Close</span>
+          <FaTimes />
+        </button>
+      )}
+    </div>
+  )
+}
+
+AlertBanner.defaultProps = {
+    showIcon: true,
+    rounded: true,
+}
+
+AlertBanner.propTypes = {
+    /** Type of Alert */
+    type: PropTypes.oneOf(['info', 'success', 'warning', 'danger']).isRequired,
+    /** Determins if the icon assosiated with the alert type should be shown (defaults to true) */
+    showIcon: PropTypes.bool,
+    /** Function to be called when Alert is dismissed */
+    onDismiss: PropTypes.func,
+    /** Whether Alert should have rounded corners */
+    rounded: PropTypes.bool,
+    /** Components to be rendered as Part of the Compound Component*/
+    children: PropTypes.node.isRequired,
+}
+

package/src/avatar.tsx

@@ -1,51 +1,81 @@
-type Props = {
-  img?: string;
-  placeholderInitials: string[];
-  color?: string;
-  border?: string;
-};
+//@ts-nocheck
+import { twMerge } from 'tailwind-merge'
+import PropTypes from 'prop-types'
 
-export function Avatar({ img, placeholderInitials, color, border }: Props) {
-  console.log(placeholderInitials[0]);
+const avatarSize = Object.freeze({
+  xs: 'w-6 h-6',
+  sm: 'w-8 h-8',
+  md: 'w-10 h-10',
+  lg: 'w-20 h-20',
+  xl: 'w-36 h-36',
+})
 
-  var colorMap: Record<string, string> = {
-    A: "bg-red-200",
-    B: "bg-red-200",
-    C: "bg-red-200",
-    D: "bg-red-200",
-    E: "bg-red-200",
-    F: "bg-red-200",
-    G: "bg-red-200",
-    H: "bg-pink-200",
-    I: "bg-pink-200",
-    J: "bg-pink-200",
-    K: "bg-pink-200",
-    L: "bg-pink-200",
-    M: "bg-pink-200",
-    N: "bg-pink-200",
-    O: "bg-green-200",
-    P: "bg-green-200",
-    Q: "bg-green-200",
-    R: "bg-green-200",
-    S: "bg-green-200",
-    T: "bg-green-200",
-    U: "bg-orange-200",
-    V: "bg-orange-200",
-    W: "bg-orange-200",
-    X: "bg-orange-200",
-    Y: "bg-orange-200",
-    Z: "bg-orange-200",
-  };
+const fontSize = Object.freeze({
+  xs: 'text-xs',
+  sm: 'text-sm',
+  md: 'text-lg',
+  lg: 'text-3xl',
+  xl: 'text-7xl',
+})
 
-  const bgColor = colorMap[placeholderInitials[0]] || "bg-gray-100";
+var colorMap = Object.freeze({
+  A: 'bg-red-200',
+  B: 'bg-red-200',
+  C: 'bg-red-200',
+  D: 'bg-red-200',
+  E: 'bg-red-200',
+  F: 'bg-red-200',
+  G: 'bg-red-200',
+  H: 'bg-pink-200',
+  I: 'bg-pink-200',
+  J: 'bg-pink-200',
+  K: 'bg-pink-200',
+  L: 'bg-pink-200',
+  M: 'bg-pink-200',
+  N: 'bg-pink-200',
+  O: 'bg-green-200',
+  P: 'bg-green-200',
+  Q: 'bg-green-200',
+  R: 'bg-green-200',
+  S: 'bg-green-200',
+  T: 'bg-green-200',
+  U: 'bg-orange-200',
+  V: 'bg-orange-200',
+  W: 'bg-orange-200',
+  X: 'bg-orange-200',
+  Y: 'bg-orange-200',
+  Z: 'bg-orange-200',
+})
 
-  return (
+export function Avatar({ children, img, size, placeholderInitials, rounded, ...props }) {
+  const bgColor = placeholderInitials ? colorMap[placeholderInitials[0].toUpperCase()] : 'bg-gray-100'
+  return img ? (
+    <img
+      src={img}
+      className={twMerge('flex justify-center items-center space-x-4 object-cover', size ? avatarSize[size] : 'w-10 h-10', rounded ? "rounded-full" : "rounded-lg")}
+      {...props}
+    ></img>
+  ) : (
     <div
-      className={`relative inline-flex h-10 w-10 items-center justify-center overflow-hidden bg-gray-100 dark:bg-gray-600 ${border} ${color} ${bgColor}`}
+      className={twMerge(
+        'relative inline-flex items-center justify-center overflow-hidden',
+        bgColor,
+        size ? avatarSize[size] : 'w-10 h-10', rounded ? "rounded-full" : "rounded-lg"
+      )}
+      {...props}
     >
-      <span className="font-medium text-gray-600 dark:text-gray-300">
-        {placeholderInitials}
-      </span>
+      <span className={twMerge('text-gray-600 dark:text-gray-300', size ? fontSize[size] : 'text-md')}>{placeholderInitials.toUpperCase()}</span>
     </div>
-  );
+  )
+}
+
+Avatar.propTypes = {
+  /** String for file path of image */
+  img: PropTypes.string,
+  /** String to determine the size of the avatar. "xs, sm, md, lg, xl" */
+  size: PropTypes.string,
+  /** String for intials of name inputted */
+  placeholderInitials: PropTypes.string.isRequired,
+  /** Boolean to determine if avatar is circular */
+  rounded: PropTypes.boolean,
 }

package/src/badge.tsx

@@ -0,0 +1,43 @@
+//@ts-nocheck
+import { variantProps } from 'classname-variants/react';
+
+const badgeProps = variantProps({
+  base: "flex h-fit items-center gap-1 font-semibold",
+  variants: {
+    color: {
+      info: "bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300",
+      gray: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600",
+      failure: "bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300",
+      success: "bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300",
+      warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300",
+      indigo: "bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300",
+      purple: "bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300",
+      pink: "bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300",
+      blue: "bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-900 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300",
+      cyan: "bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-900 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300",
+      dark: "bg-gray-600 text-gray-100 dark:bg-gray-900 dark:text-gray-200 group-hover:bg-gray-500 dark:group-hover:bg-gray-700",
+      light: "bg-gray-200 text-gray-800 dark:bg-gray-400 dark:text-gray-900 group-hover:bg-gray-300 dark:group-hover:bg-gray-500",
+      green: "bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300",
+      lime: "bg-lime-100 text-lime-800 dark:bg-lime-200 dark:text-lime-900 group-hover:bg-lime-200 dark:group-hover:bg-lime-300",
+      red: "bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300",
+      teal: "bg-teal-100 text-teal-800 dark:bg-teal-200 dark:text-teal-900 group-hover:bg-teal-200 dark:group-hover:bg-teal-300",
+      yellow: "bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300"
+    },
+    size: {
+      xs: "p-1 text-xs",
+      sm: "p-1.5 text-sm"
+    },
+    icon: {
+      false: "rounded px-2 py-0.5",
+      true: "rounded-full p-1.5",
+    },
+  }
+})
+
+export function Badge ({ color="gray", size="xs", icon="false", children, ...props }) {
+  return (
+    <span {...badgeProps({ color, size, icon })} {...props}>{children}
+    </span>
+    
+  )
+}

package/src/index.tsx

@@ -12,7 +12,6 @@ export { Drawer } from "./drawer";
 export { MiniFeatureBlock } from "./mini-feature-block";
 export { Layout } from "./layout/layout";
 export { ColorPicker } from "./color-picker";
-export { Avatar } from "./avatar";
 export { TextRow } from "./text-row";
 export { PageHeader } from "./page-header";
 export { ButtonGroupItem } from "./button-group-item";
@@ -36,6 +35,11 @@ export { Select } from "./select";
 export { Checkbox } from "./checkbox";
 export { Accordion } from "./accordion";
 export { Breadcrumb } from "./breadcrumb";
-export {TextArea} from "./textarea";
+export { TextArea } from "./textarea";
+export { Modal } from "./modal";
+export { AlertBanner } from "./alert-banner";
+export { Avatar } from "./avatar";
+export { Badge } from "./badge";
+export { Label } from "./label";
 
 import "./styles.css";

package/src/label.tsx

@@ -0,0 +1,11 @@
+//@ts-nocheck
+import { twMerge } from 'tailwind-merge'
+
+export function Label({ children, ...props }) {
+  return (
+    <label className={twMerge("text-sm font-medium text-gray-900 dark:text-white", props.className && props.className)} 
+    data-testid="flowbite-label"{...props}>
+      {children}
+      </label>
+  )
+}

package/src/modal.tsx

@@ -0,0 +1,121 @@
+//@ts-nocheck
+import { FaTimes } from 'react-icons/fa'
+import { variantProps } from 'classname-variants/react'
+import PropTypes from 'prop-types'
+
+const modalProps = variantProps({
+  base: 'relative p-4 w-full max-h-full ',
+  variants: {
+    size: {
+      xsm: 'max-w-md',
+      sm: 'max-w-xl',
+      md: 'max-w-2xl',
+      lg: 'max-w-3xl',
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+})
+
+export function Modal({ children, ...props }) {
+  const renderHeadedModal = () => (
+    <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
+      <h3 className="text-xl font-semibold text-gray-900 dark:text-white">{props.title}</h3>
+      <button
+        type="button"
+        className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+        data-modal-hide="default-modal"
+        onClick={props.onClose}
+      >
+        <FaTimes />
+        <span className="sr-only">Close modal</span>
+      </button>
+    </div>
+  )
+
+  const renderHeadlessModal = () => (
+    <button
+      type="button"
+      className="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+      data-modal-hide="default-modal"
+      onClick={props.onClose}
+    >
+      <FaTimes />
+      <span className="sr-only">Close modal</span>
+    </button>
+  )
+
+  if (!props.show) return <div />
+
+  return (
+    <div
+      id="default-modal"
+      tabIndex="-1"
+      aria-hidden="true"
+      className="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full flex bg-gray-900 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-50"
+      role="dialog"
+    >
+      <div {...modalProps(props)}>
+        <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
+          {props.title ? renderHeadedModal() : renderHeadlessModal()}
+          {!props.title && (
+            <button
+              type="button"
+              className="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+              data-modal-hide="default-modal"
+              onClick={props.onClose}
+            >
+              <FaTimes />
+              <span className="sr-only">Close modal</span>
+            </button>
+          )}
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function ModalBody({ children }) {
+  return <div>{children}</div>
+}
+
+export function ModalFooter({ children, border = true }) {
+  return <div className={`flex items-center p-4 md:p-5 ${border && 'border-t'} border-gray-200 rounded-b dark:border-gray-600`}>{children}</div>
+}
+
+Modal.Body = ModalBody
+Modal.Footer = ModalFooter
+
+Modal.defaultProps = {
+    size: 'md',
+    show: true,
+}
+
+Modal.propTypes = {
+  /** Tile of the modal not providing a title makes this a headless modal */
+  title: PropTypes.string,
+  /** Whether or not the modal is visible */
+  show: PropTypes.bool,
+  /** Size of the modal */
+  size: PropTypes.oneOf(['xsm', 'sm', 'md', 'lg']),
+  /** Callback for the close action */
+  onClose: PropTypes.func.isRequired,
+  /** Body and Footer compounds used to build up the modal. The footer is optional */
+  children: PropTypes.arrayOf([
+    PropTypes.shape({ type: PropTypes.oneOf([ModalBody]), }).isRequired,
+    PropTypes.shape({ type: PropTypes.oneOf([ModalFooter]) })
+  ]),
+}
+
+ModalBody.propTypes = {
+    /** Markup to make up the Modal content */
+    children: PropTypes.node.isRequired,
+}
+
+ModalFooter.propTypes = {
+    /** Markup to make up the Modal Footer */
+    border: PropTypes.bool,
+    children: PropTypes.node.isRequired,
+}

package/src/stacked-list-item.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import { Avatar } from "./";
 import { Badge } from "flowbite-react";
 

package/dist/chunk-664HOPW7.mjs

@@ -1,7 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-
-function a({img:i,placeholderInitials:g,color:e,border:n}){console.log(g[0]);var b={A:"bg-red-200",B:"bg-red-200",C:"bg-red-200",D:"bg-red-200",E:"bg-red-200",F:"bg-red-200",G:"bg-red-200",H:"bg-pink-200",I:"bg-pink-200",J:"bg-pink-200",K:"bg-pink-200",L:"bg-pink-200",M:"bg-pink-200",N:"bg-pink-200",O:"bg-green-200",P:"bg-green-200",Q:"bg-green-200",R:"bg-green-200",S:"bg-green-200",T:"bg-green-200",U:"bg-orange-200",V:"bg-orange-200",W:"bg-orange-200",X:"bg-orange-200",Y:"bg-orange-200",Z:"bg-orange-200"};let o=b[g[0]]||"bg-gray-100";return jsx("div",{className:`relative inline-flex h-10 w-10 items-center justify-center overflow-hidden bg-gray-100 dark:bg-gray-600 ${n} ${e} ${o}`,children:jsx("span",{className:"font-medium text-gray-600 dark:text-gray-300",children:g})})}
-
-export { a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-664HOPW7.mjs.map

package/dist/chunk-664HOPW7.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/avatar.tsx"],"names":["jsx","Avatar","img","placeholderInitials","color","border","colorMap","bgColor"],"mappings":"AA6CM,cAAAA,MAAA,oBAtCC,SAASC,EAAO,CAAE,IAAAC,EAAK,oBAAAC,EAAqB,MAAAC,EAAO,OAAAC,CAAO,EAAU,CACzE,QAAQ,IAAIF,EAAoB,CAAC,CAAC,EAElC,IAAIG,EAAmC,CACrC,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,eACH,EAAG,eACH,EAAG,eACH,EAAG,eACH,EAAG,eACH,EAAG,eACH,EAAG,gBACH,EAAG,gBACH,EAAG,gBACH,EAAG,gBACH,EAAG,gBACH,EAAG,eACL,EAEA,IAAMC,EAAUD,EAASH,EAAoB,CAAC,CAAC,GAAK,cAEpD,OACEH,EAAC,OACC,UAAW,2GAA2GK,KAAUD,KAASG,IAEzI,SAAAP,EAAC,QAAK,UAAU,+CACb,SAAAG,EACH,EACF,CAEJ","sourcesContent":["type Props = {\n  img?: string;\n  placeholderInitials: string[];\n  color?: string;\n  border?: string;\n};\n\nexport function Avatar({ img, placeholderInitials, color, border }: Props) {\n  console.log(placeholderInitials[0]);\n\n  var colorMap: Record<string, string> = {\n    A: \"bg-red-200\",\n    B: \"bg-red-200\",\n    C: \"bg-red-200\",\n    D: \"bg-red-200\",\n    E: \"bg-red-200\",\n    F: \"bg-red-200\",\n    G: \"bg-red-200\",\n    H: \"bg-pink-200\",\n    I: \"bg-pink-200\",\n    J: \"bg-pink-200\",\n    K: \"bg-pink-200\",\n    L: \"bg-pink-200\",\n    M: \"bg-pink-200\",\n    N: \"bg-pink-200\",\n    O: \"bg-green-200\",\n    P: \"bg-green-200\",\n    Q: \"bg-green-200\",\n    R: \"bg-green-200\",\n    S: \"bg-green-200\",\n    T: \"bg-green-200\",\n    U: \"bg-orange-200\",\n    V: \"bg-orange-200\",\n    W: \"bg-orange-200\",\n    X: \"bg-orange-200\",\n    Y: \"bg-orange-200\",\n    Z: \"bg-orange-200\",\n  };\n\n  const bgColor = colorMap[placeholderInitials[0]] || \"bg-gray-100\";\n\n  return (\n    <div\n      className={`relative inline-flex h-10 w-10 items-center justify-center overflow-hidden bg-gray-100 dark:bg-gray-600 ${border} ${color} ${bgColor}`}\n    >\n      <span className=\"font-medium text-gray-600 dark:text-gray-300\">\n        {placeholderInitials}\n      </span>\n    </div>\n  );\n}\n"]}