hds-web 0.1.0

package/src/HDS/components/Avatars/imageEditor.js

@@ -0,0 +1,32 @@
+import React from 'react';
+const AvatarFromImage = ({ imageFile, altText, size }) => {
+  const [imageUrl, setImageUrl] = React.useState('');
+
+  React.useEffect(() => {
+    const reader = new FileReader();
+    if (imageFile && imageFile.size > 0) {
+      reader.readAsDataURL(imageFile);
+      reader.onload = () => {
+        setImageUrl(reader.result);
+      };
+    }
+  }, [imageFile]);
+
+  // if (!imageFile) {
+  //   return <div>No image selected</div>;
+  // }
+
+  return (
+    <div className={`w-${`[${size}px]`} h-${`[${size}px]`} rounded-full overflow-hidden`}>
+      <img src={`https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0b1d8059-e01d-44c2-957c-35370511501b`} alt={altText} className={` rounded-full w-12 h-12} object-cover`} />
+    </div>
+  );
+};
+
+export default AvatarFromImage;
+
+
+AvatarFromImage.defaultProps = {
+  size: '12',
+ 
+};

package/src/HDS/components/Avatars/index.js

@@ -0,0 +1,6 @@
+export {default as ImageAvatar} from './imageEditor';
+export {default as IconAvatar} from './iconAvatar';
+export {default as AvatarGroup} from './avatarGroup';
+export {default as InitialsAvatar} from './initialsAvatar';
+export {default as ProfileAvatar} from './profileAvatar';
+export {default as HasConAvatar} from './hasConAv';

package/src/HDS/components/Avatars/initialsAvatar.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+const sizeClasses = {
+  xs: 'h-6 w-6 text-xs-medium',
+  sm: 'h-8 w-8 text-sm-medium',
+  md: 'h-10 w-10 text-md-medium',
+  lg: 'h-12 w-12 text-lg-medium',
+  xl: 'h-[60px] w-[60px] text-xl-medium',
+};
+
+export default function initialsAvatar({ size, text }) {
+  const formattedText = text.slice(0, 2);
+  return (
+    <>
+      <span
+        className={`${sizeClasses[size]} inline-flex items-center justify-center shadow rounded-full bg-neutral-100 border-[1.5px] border-neutral-0`}
+      >
+        <span className="text-neutral-800">{formattedText}</span>
+      </span>
+    </>
+  );
+}
+
+initialsAvatar.propTypes = {
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  text: PropTypes.string.isRequired,
+};
+
+initialsAvatar.defaultProps = {
+  size: 'sm',
+  text: 'AM',
+};

package/src/HDS/components/Avatars/profileAvatar.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '../common-components/Icon';
+const imgSizes = {
+    'xs': 'h-8 w-8',
+    'sm': 'h-10 w-10',
+    'md': 'h-12 w-12',
+    'lg': 'h-[60px] w-[60px]',
+}
+
+const nameTextStyle = {
+    'xs': 'text-sm-medium',
+    'sm': 'text-sm-medium',
+    'md': 'text-md-medium',
+    'lg': 'text-lg-medium'
+}
+
+const desgnTextStyle = {
+    'xs': 'text-xs-regular',
+    'sm': 'text-sm-regular',
+    'md': 'text-md-regular',
+    'lg': 'text-md-regular'
+}
+
+export default function ProfileAvatar({ name, designation, size, imageUrl }) {
+    const imgSizeClass = imgSizes[size] || imgSizes.medium;
+    const defaultAvatarIcon = "user03";
+    const hasImageUrl = imageUrl && imageUrl.length > 0;
+    return (
+        <a href="#" className="group block flex-shrink-0">
+            <div className="flex items-center">
+                <div>
+                    {hasImageUrl ? (
+                        <img
+                            className={`${imgSizeClass} inline-block  shadow rounded-full border-[1.5px] border-neutral-0`}
+                            src={imageUrl}
+                            
+                        />
+                    ) : (
+                        <Icon
+                            variant={defaultAvatarIcon}
+                            height={imgSizeClass}
+                            strokeColor={'#D2D6DB'}
+                        />
+                    )}
+                </div>
+                <div className="ml-3">
+                    <p className={`${nameTextStyle[`${size}`]}  text-neutral-900 group-hover:text-gray-900`}>{name}</p>
+                    <p className={`${desgnTextStyle[`${size}`]}  text-neutral-500 group-hover:text-gray-700`}>{designation}</p>
+                </div>
+            </div>
+        </a>
+    )
+}
+
+ProfileAvatar.propTypes = {
+    name: PropTypes.string.isRequired,
+    designation: PropTypes.string.isRequired,
+};
+
+ProfileAvatar.defaultProps = {
+    name: 'Names',
+    designation: 'Product Marketing, Hasura',
+    imageUrl: `https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80`
+};

package/src/HDS/components/BadgesCaption/badges.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '../common-components/Icon';
+const sizeClasses = {
+  sm: 'py-0.5 px-2 hds-d-body3c',
+  default: 'py-1 px-3',
+};
+
+const iconClasses = {
+  sm: 'ml-2 mr-1',
+  default: '',
+};
+
+const colorVariants = {
+  blue: 'bg-blue-600 text-blue-800 hover:bg-blue-300 dark:bg-blue-500 dark:text-blue-100 dark:hover:bg-blue-600',
+  grey: 'bg-neutral-600 text-neutral-800 hover:bg-neutral-300 dark:bg-neutral-500 dark:text-neutral-100 dark:hover:bg-neutral-600',
+  purple: 'bg-purple-600 text-purple-800 hover:bg-purple-300 dark:bg-purple-500 dark:text-purple-100 dark:hover:bg-purple-600',
+  pink: 'bg-pink-600 text-pink-800 hover:bg-pink-300 dark:bg-pink-500 dark:text-pink-100 dark:hover:bg-pink-600',
+  amber: 'bg-amber-600 text-amber-800 hover:bg-amber-300 dark:bg-amber-500 dark:text-amber-100 dark:hover:bg-amber-600',
+  cyan: 'bg-cyan-600 text-cyan-800 hover:bg-cyan-300 dark:bg-cyan-500 dark:text-cyan-100 dark:hover:bg-cyan-600',
+  green: 'bg-green-600 text-green-800 hover:bg-green-300 dark:bg-green-500 dark:text-green-100 dark:hover:bg-green-600',
+}
+
+
+
+export default function Badge({
+  leftIconVariant,
+  leftIconColor,
+  rightIconVariant,
+  rightIconColor,
+  size,
+  children,
+  color,
+  onClick
+}) {
+  const [isClicked, setIsClicked] = useState(false);
+  const handleClick = () => {
+    setIsClicked(!isClicked);
+    if (onClick) {
+      onClick();
+    }
+  };
+
+  return (
+    <button
+      className={`${sizeClasses[size]} ${
+        colorVariants[color]
+      } inline-flex items-center rounded-full`}
+      onClick={handleClick}
+      aria-pressed={isClicked}
+    >
+       {leftIconVariant && leftIconVariant !== 'none' && (
+          <div className='mr-1'>
+            <Icon height={'h-4'} variant={leftIconVariant} strokeColor={leftIconColor} />
+          </div>
+        )}
+        {children}
+
+        {rightIconVariant && rightIconVariant !== 'none' && (
+          <div className='ml-1'>
+            <Icon height={'h-4'} variant={rightIconVariant} strokeColor={rightIconColor} />
+          </div>
+        )}
+    </button>
+  );
+}
+
+
+
+Badge.propTypes = {
+  size: PropTypes.oneOf(['sm', 'default']),
+  children: PropTypes.string.isRequired,
+};
+
+Badge.defaultProps = {
+  size: 'sm',
+  children: 'Label',
+  leftIconVariant: 'none',
+  leftIconVariant: 'none',
+  leftIconColor: '#80ff00',
+  rightIconColor: '#80ff00',
+  color: 'bg-blue-200'
+};

package/src/HDS/components/BadgesCaption/count.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+const sizeClasses = {
+  sm: 'py-0.5 px-1.5',
+  md: 'py-0.5 px-2',
+  lg: 'py-1 px-2.5',
+};
+
+const variant = {
+  A: 'bg-neutral-100 text-neutral-700',
+  B: 'bg-blue-100 text-blue-700',
+  C: 'bg-neutral-0 border border-neutral-300 text-neutral-700',
+};
+
+export default function Count({ size, countVariant, children }) {
+  return (
+    <span
+      className={`${sizeClasses[size]} ${variant[countVariant]} flex flex-row max-w-max justify-center items-center rounded-full`}
+    >
+      {children}
+    </span>
+  );
+}
+
+Count.propTypes = {
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  countVariant: PropTypes.oneOf(['A', 'B', 'C']),
+  children: PropTypes.string.isRequired,
+};
+
+Count.defaultProps = {
+  size: 'sm',
+  children: '24',
+  countVariant: 'A',
+};

package/src/HDS/components/BadgesCaption/index.js

@@ -0,0 +1,2 @@
+export {default as Badges} from './badges';
+export {default as Count} from './count';

package/src/HDS/components/Banners/banners.js

@@ -0,0 +1,25 @@
+import React from 'react';
+export default function Banner() {
+  return (
+    <div className="flex items-center bg-neutral-100 pl-1 py-1 pr-[10px] sm:px-3.5 sm:before:flex-1 w-full rounded-full">
+      <p className="text-sm leading-6 text-white">
+      <a
+          href="#"
+          className="flex-none rounded-full bg-neutral-0 py-1 px-3.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
+        >
+          Register now 
+        </a>
+        <span className="">
+        We’ve just released a new feature <span aria-hidden="true">&#8599;</span>
+        </span>
+      </p>
+      <div className="flex flex-1 justify-end">
+        <button type="button" className="-m-3 p-3 focus-visible:outline-offset-[-4px]">
+          <span className="sr-only">Dismiss</span>
+          {/* <XMarkIcon className="h-5 w-5 text-white" aria-hidden="true" /> */}
+          x
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/HDS/components/Banners/index.js

@@ -0,0 +1 @@
+export {default as Banner} from './banners'

package/src/HDS/components/Breadcrumbs/breadCrumbs.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Icon } from "../common-components/Icon"
+import PropTypes from 'prop-types';
+// const pages = [
+//   { name: 'Events', href: '#', current: false },
+//   { name: '', href: '#', current: false },
+//   { name: 'Hasura Con 23', href: '#', current: true },
+// ]
+
+const BUTTON_CLASSES = {
+  'A': 'text-blue-600',
+  'B': 'bg-blue-100 text-blue-600 rounded-full',
+  'C': 'bg-neutral-100 text-neutral-800 rounded-full'
+}
+
+export default function Breadcrumbs(props) {
+  const pages = Array.isArray(props.pages) ? props.pages : [];
+  const {
+    dividerIconVariant,
+    buttonVariant
+  } = props
+
+  return (
+    <nav className="flex" aria-label="Breadcrumb">
+      <ol role="list" className="flex items-center space-x-4">
+        <li>
+          <div>
+            <a href="#" className="text-pink-400 hover:text-gray-500">
+
+              <Icon height='h-5' variant={'homeline'} strokeColor={'#4D5761'} />
+              <span className="sr-only">Home</span>
+            </a>
+          </div>
+        </li>
+        {pages.map((page) => (
+          <li key={page.name}>
+            <div className="flex items-center">
+            <div className='-ml-0.5 mr-2 h-4 w-4'>
+            <Icon variant={dividerIconVariant} strokeColor={`#4D5761`} />
+          </div>
+              <a
+                href={page.href}
+                className={`${BUTTON_CLASSES[`${buttonVariant}`]} ml-4 py-1 px-2 text-sm-medium hover:text-gray-700`}
+                aria-current={page.current ? 'page' : undefined}
+              >
+                {page.name}
+              </a>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  )
+}
+
+Breadcrumbs.propTypes = {
+  dividerIconVariant: PropTypes.string,
+
+};
+
+Breadcrumbs.defaultProps = {
+  dividerIconVariant: 'chevronright',
+};

package/src/HDS/components/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export {default as BreadCrumbs} from './breadCrumbs';

package/src/HDS/components/Buttons/button.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '../common-components/Icon';
+
+const Buttonclasses = {
+  'primary': {
+    'default': {
+      'base': 'desk:w-fit tab:w-fit w-full justify-center justify-center bg-blue-500 text-neutral-0',
+      'hover': 'hover:bg-blue-700 hover:text-neutral-0',
+      'focus': 'focus:bg-blue-600 focus:shadow-[0_0px_0px_4px_#80A3FF] focus:text-neutral-0 focus:outline-none',
+    },
+    'disabled': 'bg-neutral-200 text-neutral-400',
+  },
+  'tonal': {
+    'default': {
+      'base': 'desk:w-fit tab:w-fit w-full  justify-center bg-blue-100 text-blue-600',
+      'hover': 'hover:bg-blue-200 hover:text-blue-600',
+      'focus': 'focus:bg-blue-100 focus:text-blue-600 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none',
+    },
+    'disabled': 'bg-neutral-200 text-neutral-400',
+  },
+  'outline': {
+    'default': {
+      'base': 'desk:w-fit tab:w-fit w-full  justify-center border border-neutral-400 bg-neutral-0 text-neutral-800',
+      'hover': 'hover:text-neutral-800 hover:bg-neutral-100 hover:border hover:border-neutral-400 hover:drop-shadow-[0px 1px 3px rgba(28, 38, 63, 0.1), 0px 1px 2px rgba(28, 38, 63, 0.06)]',
+      'focus': 'focus:bg-neutral-0 focus:text-neutral-800 focus:border border-neutral-400 focus:shadow-[0px_0px_0px_4px_#F3F4F6] focus:outline-none',
+    },
+    'disabled': 'bg-neutral-200 text-neutral-400',
+  },
+  'ghost': {
+    'default': {
+      'base': 'desk:w-fit tab:w-fit w-full  justify-center text-blue-600',
+      'hover': 'hover:bg-blue-100 hover:text-blue-600',
+      'focus': 'focus:text-blue-700 focus:outline-none',
+    },
+    'disabled': 'text-neutral-300',
+  },
+  'primaryLink': {
+    'default': {
+      'base': 'desk:w-fit tab:w-fit w-full  justify-center text-blue-600',
+      'hover': 'hover:text-blue-700',
+      'focus': 'focus:text-blue-700 focus:outline-none',
+    },
+    'disabled': 'text-neutral-300',
+  },
+  'secondaryLink': {
+    'default': {
+      'base': 'desk:w-fit tab:w-fit w-full  justify-center text-neutral-800',
+      'hover': 'hover:text-neutral-900 hover:underline',
+      'focus': 'focus:text-neutral-900 focus:underline focus:outline-none',
+    },
+    'disabled': 'text-neutral-300',
+  },
+  'iconOnly': {
+    'default': {
+      'base': 'desk:w-fit tab:w-fit w-full justify-center justify-center bg-blue-200 rounded-full',
+
+      'hover': 'hover:bg-blue-600 hover:shadow',
+
+      'focus': 'focus:bg-blue-600 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:text-neutral-0 focus:outline-none',
+    },
+    'disabled': 'bg-neutral-200 text-neutral-400',
+  },
+
+
+}
+export default function Button(props) {
+  const {
+    rightIconVariant,
+    rightIconColor,
+    leftIconVariant,
+    leftIconColor,
+    type,
+    state,
+    size,
+    label,
+    rightAnimatedArrow,
+    rightAnimatedArrowColor,
+    className,
+    ...rest // destructuring rest of the props
+  } = props
+
+  let defaultClasses = '';
+
+  if (state === 'default') {
+    const baseClasses = Buttonclasses[type][state]['base'];
+    const hoverClasses = Buttonclasses[type][state]['hover'];
+    const focusClasses = Buttonclasses[type][state]['focus'];
+    defaultClasses = `${baseClasses} ${hoverClasses} ${focusClasses}`;
+  } else if (state === 'disabled') {
+    defaultClasses = Buttonclasses[type][state];
+  }
+
+  const buttonClasses = [
+    'inline-flex items-center',
+    'rounded-full',
+    `button-${size}`,
+    'group',
+    defaultClasses,
+    className
+
+  ].join(' ');
+
+  return (
+    <div>
+      <button
+        type="button"
+        className={buttonClasses}
+        {...rest}
+      >
+        {leftIconVariant && leftIconVariant !== 'none' && (
+          <div className='-ml-0.5 mr-2 h-4 w-4 '>
+            <Icon variant={leftIconVariant} strokeColor={leftIconColor} />
+          </div>
+        )}
+        {label}
+
+        {rightAnimatedArrow && rightAnimatedArrow !== 'none' && (
+          <div className=' ml-1.5 hover:transition-all '>
+            <Icon className=' z-10 group-hover:translate-x-[0.098rem] group-hover:transition-all' height='h-4' variant={'chevronright'} strokeColor={rightAnimatedArrowColor} />
+
+            <Icon className='invisible -mt-4 group-hover:transition-all group-hover:delay-100 group-hover:visible ' height='h-4' variant='minus01' strokeColor={rightAnimatedArrowColor} />
+
+          </div>
+        )}
+
+        {rightIconVariant && rightIconVariant !== 'none' && (
+           <div className='ml-1.5 h-4 w-4 '>
+           <Icon variant={rightIconVariant} strokeColor={rightIconColor} />
+         </div>
+        )}
+      </button>
+    </div>
+  );
+
+};
+
+Button.propTypes = {
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
+  label: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  state: PropTypes.oneOf(['default', 'disabled']),
+  leftIconVariant: PropTypes.string,
+  rightIconVariant: PropTypes.string
+
+};
+
+Button.defaultProps = {
+  size: 'sm',
+  type: 'primary',
+  leftIconVariant: 'home03',
+  rightIconVariant: 'home3',
+  rightIconColor: '#80ff00',
+  leftIconColor: '#80ff00'
+
+};

package/src/HDS/components/Buttons/index.js

@@ -0,0 +1 @@
+export {default as HDSButton} from './button';

package/src/HDS/components/Buttons/socialMediaButton.js

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { Icon } from '../common-components/Icon';
+
+const Buttonclasses = {
+    'Type1': {
+        'base': 'bg-neutral-0 border border-neutral-400 py-2.5 px-6 text-md-medium',
+        'hover': 'hover:bg-neutral-100 hover:shadow',
+        'focus': 'focus:shadow-[0px_0px_0px_4px_#F3F4F6] focus:outline-none',
+    },
+    'Type2': {
+        'base': 'text-neutral-0 bg-[#333333]',
+        'hover': 'hover:bg-[#333333]',
+        'focus': 'focus:bg-[#333333] focus:outline-none focus:shadow-[0px_0px_0px_4px_#D2D6DB]',
+    },
+    'Type3': {
+        'base': 'text-neutral-800',
+        'hover': 'hover:text-neutral-900 hover:underline',
+        'focus': 'focus:text-neutral-900 focus:underline focus:outline-none',
+    },
+    'Custom': {
+        'base': 'text-neutral-800',
+        'hover': 'hover:text-neutral-900 hover:underline',
+        'focus': 'focus:text-neutral-900 focus:underline focus:outline-none',
+    },
+}
+
+export default function SMButton({ IconVariant, type, label, ...props }) {
+    let defaultClasses = '';
+    if (state === 'default') {
+        const baseClasses = Buttonclasses[type][state]['base'];
+        const hoverClasses = Buttonclasses[type][state]['hover'];
+        const focusClasses = Buttonclasses[type][state]['focus'];
+        defaultClasses = `${baseClasses} ${hoverClasses} ${focusClasses}`;
+    } else if (state === 'disabled') {
+        defaultClasses = Buttonclasses[type][state];
+    }
+    const buttonClasses = [
+        'inline-flex items-center',
+        'rounded-full',
+        `${Buttonclasses[type][state]}`,
+        `button-${size}`,
+        defaultClasses,
+
+    ].join(' ');
+
+    return (
+        <div className='text-color-pink-500'>
+            <button
+                type="button"
+                className=' '
+                {...props}
+            >
+                {IconVariant && (
+                    <div className='-ml-0.5 mr-2 h-4 w-4'>
+                        <Icon variant={IconVariant} strokeColor={'#1EA7FD'} />
+                    </div>
+                )}
+                {label}
+            </button>
+        </div>
+    );
+
+};
+
+SMButton.propTypes = {
+    label: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    state: PropTypes.oneOf(['default', 'disabled']),
+    IconVariant: PropTypes.string
+};
+
+SMButton.defaultProps = {
+    size: 'sm',
+    type: 'primary',
+    IconVariant: 'home03'
+
+};

package/src/HDS/components/Cards/Menu/flyout.js

@@ -0,0 +1,71 @@
+import { Fragment } from 'react'
+import { Popover, Transition } from '@headlessui/react'
+import { Icon } from '../../common-components/Icon'
+import { Typography } from '../../../foundation/Typography'
+export default function flyout(props) {
+  const {
+    label,
+    childArray,
+    buttonArray,
+  } = props
+  return (
+    <Popover className="relative">
+      <Popover.Button className="inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
+        <span>{label}</span>
+        {/* <ChevronDownIcon className="h-5 w-5" aria-hidden="true" /> */}
+      </Popover.Button>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel className="absolute left-1/2 z-10 mt-5 flex w-screen max-w-max -translate-x-1/2 px-4">
+          <div className="max-w-md flex-auto overflow-hidden rounded-3xl bg-neutral-0 text-sm leading-6 shadow-sm w-fit ">
+            <div className="p-6">
+              <Typography textStyle='h-6' className='text-neutral-500 mb-4'>{label}</Typography>
+              {childArray.map((item) => (
+                <div key={item.name} className="group relative flex gap-x-3.5 rounded-lg p-[0px_8px_0px_0px;]  hover:bg-gray-50 items-center">
+                  <div className="mt-1 flex h-11 w-11 flex-none justify-center rounded-lg bg-gray-50 items-center group-hover:bg-white">
+                    {/* <item.icon className="h-6 w-6 text-gray-600 group-hover:text-indigo-600" aria-hidden="true" /> */}
+                    {item.icon && (
+                      <Icon height={'h-6'} variant={item.icon} strokeColor={'#6C737F'} />
+                    )}
+                  </div>
+                  <div>
+                    <a href={item.href} className="">
+                      <Typography textStyle='h-6' className='text-neutral-500'>{item.name}</Typography>
+                      <span className="absolute inset-0" />
+                    </a>
+                    {item.description && item.description.length > 0 && (
+                      <p className="mt-1 text-gray-600">{item.description}</p>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50">
+              {buttonArray.map((item) => (
+                <a
+                  key={item.name}
+                  href={item.href}
+                  className="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100"
+                >
+
+                  {item.icon && (
+                    <Icon height={'h-6'} variant={item.icon} strokeColor={'#6C737F'} />
+                  )}
+                  <Typography textStyle='h-6' className='text-neutral-500'>{item.name}</Typography>
+                </a>
+              ))}
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  )
+}