hds-web 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

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

@@ -7,23 +7,29 @@ const imgSizes = {
     'md': 'h-12 w-12',
     'lg': 'h-[60px] w-[60px]',
 }
+const AvatarVariant = {
+    'circular': 'shadow rounded-full border-[1.5px] border-neutral-0',
+    'square': 'rounded-lg',
+}
+
 
 const nameTextStyle = {
-    'xs': 'text-sm-medium',
-    'sm': 'text-sm-medium',
-    'md': 'text-md-medium',
-    'lg': 'text-lg-medium'
+    'xs': 'text-d-body1c-bold',
+    'sm': 'text-d-body1c-bold',
+    'md': 'text-d-body1c-bold',
+    'lg': 'text-d-body1c-bold'
 }
 
 const desgnTextStyle = {
-    'xs': 'text-xs-regular',
-    'sm': 'text-sm-regular',
-    'md': 'text-md-regular',
-    'lg': 'text-md-regular'
+    'xs': 'text-hds-d-body3c ',
+    'sm': 'text-hds-d-body3c ',
+    'md': 'text-hds-d-body3c ',
+    'lg': 'text-hds-d-body3c '
 }
 
-export default function ProfileAvatar({ name, designation, size, imageUrl }) {
-    const imgSizeClass = imgSizes[size] || imgSizes.medium;
+export default function ProfileAvatar({ name, designation, size, imageUrl, avatarVariant }) {
+    const imgSizeClass = imgSizes[size] || imgSizes.md;
+    const avatarVariantClass = AvatarVariant[avatarVariant] || AvatarVariant.circular;
     const defaultAvatarIcon = "user03";
     const hasImageUrl = imageUrl && imageUrl.length > 0;
     return (
@@ -32,9 +38,8 @@ export default function ProfileAvatar({ name, designation, size, imageUrl }) {
                 <div>
                     {hasImageUrl ? (
                         <img
-                            className={`${imgSizeClass} inline-block  shadow rounded-full border-[1.5px] border-neutral-0`}
+                            className={`${imgSizeClass} ${avatarVariantClass} rounded inline-block`}
                             src={imageUrl}
-                            
                         />
                     ) : (
                         <Icon
@@ -45,8 +50,15 @@ export default function ProfileAvatar({ name, designation, size, imageUrl }) {
                     )}
                 </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>
+                    <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>

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

@@ -93,7 +93,12 @@ const Buttonclasses = {
       'sm': 'rounded-full',
       'md': 'rounded-full p-2.5',
       'lg': 'trounded-full p-3'
-    }
+    },
+    'links': {
+      'sm': 'text-hds-d-body3c-medium rounded-full',
+      'md': 'text-hds-d-body3c-medium rounded-full',
+      'lg': 'text-hds-d-body1c-medium rounded-full'
+    },
   }
 }
 export default function Button(props) {
@@ -126,6 +131,7 @@ export default function Button(props) {
 
   let sizeType = 'default';
   if(type=='iconOnly'){sizeType='iconOnly'}
+  if(type=='secondaryLink' || type=='primaryLink' ){sizeType='links'}
 
 
   const buttonClasses = [
@@ -190,12 +196,17 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
-  size: 'sm',
+  size: 'md',
   type: 'primary',
-  leftIconVariant: 'home03',
+  leftIconVariant: 'none',
   rightIconVariant: 'home3',
-  rightIconColor: '#80ff00',
-  leftIconColor: '#80ff00',
-  animatedHoverStroke:''
-
+  rightIconColor: '#FFFFFF',
+  leftIconColor: '#FFFFFF',
+  animatedHoverStroke:'#FFFFFF',
+  state: 'default',
+  label: 'Button',
+  rightAnimatedArrow: 'True' ,
+  rightAnimatedArrowColor: '#FFFFFF',
+  animatedHoverStroke: 'group-hover:stroke-neutral-0',
+  
 };

package/src/HDS/components/Cards/Feedback/feedback.js

@@ -0,0 +1,25 @@
+import React from "react";
+import {HDSColor} from '../../../foundation/ColorPalette'
+import { ProfileAvatar } from '../../Avatars'
+import { Typography } from '../../../foundation/Typography'
+
+
+export default function FeedbackCard(props) {
+  return (
+    <div className='bg-neutral-0 rounded-3xl shadow p-6 tb-l:p-10'>
+      <div className='pb-8'>
+        <img src={props.brandImgUrl} alt={props.brandImgAlt} />
+      </div>
+      <div className="pb-10">
+        <Typography textStyle="quote" className='text-neutral-1000'>{props.description}</Typography>
+      </div>
+      <ProfileAvatar
+        name={props.speakerName}
+        size='md'
+        designation={props.speakerDesignation}
+        imageUrl={props.speakerImgUrl}
+        avatarVariant="square"
+      />
+    </div>
+  )
+}

package/src/HDS/components/Cards/Feedback/index.js

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

package/src/HDS/components/Cards/Link/index.js

@@ -0,0 +1,2 @@
+export {default as LinkCard} from './link';
+export {default as ResourcesCard} from './resources';

package/src/HDS/components/Cards/Link/link.js

@@ -0,0 +1,86 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import { Icon } from "../../common-components/Icon";
+import { HDSColor } from '../../../foundation/ColorPalette'
+import { Typography } from '../../../foundation/Typography'
+
+
+export default function LinkCard(props) {
+    const iconStrokeColor = HDSColor(props.iconStrokeColor);
+    const cardBgColorClass = HDSColor(props.cardBgColor)
+    const cardHoverClasses = `hover:${HDSColor(props.cardHoverBg)}` + ' hover:shadow-xl';
+    return (
+        <>
+            <a
+                href={props.linkUrl}
+                className={`${cardHoverClasses} ${cardBgColorClass} min-w-[15rem] rounded-2xl border border-neutral-150 p-6 block`}
+            >
+                {props.brandImageUrl ?
+                    (
+                        <div className="flex flex-col">
+                            <div className="flex justify-end items-end pr-6">
+                                {props.iconArrowVariant &&
+                                    (<Icon
+                                        height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
+                                        variant={props.iconArrowVariant}
+                                        strokeColor={props.iconArrowStrokeColor}
+                                    />)
+                                }
+                            </div>
+                            <img src={props.brandImageUrl} alt={props.brandImageAlt} />
+
+                        </div>
+                    )
+                    :
+                    (
+                        <>
+                            <div className='flex items-center'>
+                                <div className='flex items-center flex-1'>
+                                    {props.iconVariant &&
+                                        (<Icon
+                                            height={'w-6 h-6 mr-2 stroke-[1.5px] '}
+                                            variant={props.iconVariant}
+                                            strokeColor={iconStrokeColor}
+                                        />)}
+                                    <Typography
+                                        as="h5"
+                                        textStyle="body1c-bold"
+                                        className="text-neutral-1000">
+                                        {props.title}
+                                    </Typography>
+                                </div>
+                                {props.iconArrowVariant &&
+                                    (<Icon
+                                        height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
+                                        variant={props.iconArrowVariant}
+                                        strokeColor={props.iconArrowStrokeColor}
+                                    />)
+                                }
+                            </div>
+                            {props.description &&
+                                (<Typography
+                                    textStyle="body3"
+                                    className="text-neutral-1000 mt-2">
+                                    {props.description}
+                                </Typography>)}
+                        </>
+                    )
+                }
+            </a>
+        </>
+    )
+}
+
+LinkCard.defaultProps = {
+    brandImageUrl: '',
+    brandImageAlt:'',
+    linkUrl: '#',
+    cardBgColor: 'bg-neutral-0',
+    cardHoverBg: 'bg-neutral-0',
+    iconVariant: 'videorecorder',
+    iconStrokeColor: 'blue-500',
+    iconArrowVariant: 'arrownarrowupright',
+    iconArrowStrokeColor: 'blue-400',
+    title: 'Webinar',
+    description: 'Model Level Authorization System for GraphQL with Hasura',
+};

package/src/HDS/components/Cards/Link/resources.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { Icon } from "../../common-components/Icon";
+import { HDSColor } from '../../../foundation/ColorPalette';
+import { Typography } from '../../../foundation/Typography';
+import PropTypes from 'prop-types';
+
+
+export default function ResourcesCard(props) {
+    const iconBG = HDSColor(props.iconBg);
+    console.log(props.resourcesArr);
+    return (
+        <>
+            <div className={`p-8 ${props.cardBg} min-w-[18rem] rounded-3xl`}>
+
+                {props.title && (
+                    <Typography
+                        textStyle='h6'
+                        className={`uppercase ${props.title_text_color}`}>
+                        {props.title}
+                    </Typography>
+                )}
+                <div className="mt-6">
+                    {props.resourcesArr.map((value) => (
+                        <a href={value.cta_linkUrl} className="flex gap-2 mt-4">
+                            <Icon
+                                height={'w-6 h-6 mr-2 stroke-[1.5px] stroke-blue-600'}
+                                variant={value.cta_icon}
+                                strokeClass={value.cta_stroke}
+                            />
+                            <Typography
+                                textStyle='body2c'
+                                className={value.cta_text_color}>
+                                {value.cta_text}
+                            </Typography>
+                        </a>
+                    ))}
+                </div>
+            </div>
+        </>
+    )
+}
+ResourcesCard.defaultProps = {
+    cardBg: 'bg-neutral-0',
+    title: 'Resources Card', 
+    title_text_color: 'text-blue-600',
+    resourcesArr: [
+        { cta_text: 'This is one really long link that may spill onto the next line', cta_icon: 'linkexternal01', cta_text_color: 'text-neutral-700 hover:text-blue-600 ', cta_stroke: 'stroke-blue-600', cta_linkUrl: '#' },
+        { cta_text: 'This is a regular link that fits in one line', cta_text_color: 'text-neutral-700', cta_icon: 'linkexternal01', cta_stroke: 'stroke-blue-600',  cta_linkUrl: '#'  },
+        { cta_text: 'text3', cta_text_color: 'text-neutral-700', cta_icon: 'linkexternal01', cta_stroke: 'stroke-blue-600',  cta_linkUrl: '#'  },
+        { cta_text: 'text4', cta_text_color: 'text-neutral-700', cta_icon: 'linkexternal01', cta_stroke: 'stroke-blue-600',  cta_linkUrl: '#'  },
+
+    ]
+}

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

@@ -34,6 +34,7 @@ export default function FlyoutB(props) {
                         size='sm'
                         rightAnimatedArrow={true}
                         rightAnimatedArrowColor='#6C737F'
+                        className='mt-4'
                     />
                     </div>
                     <Typography className='mt-2 text-neutral-800' textStyle='body3'>{mainDescription}</Typography>

package/src/HDS/components/Cards/TalkDetailCard/index.js

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

package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js

@@ -0,0 +1,68 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import {HDSColor} from '../../../foundation/ColorPalette';
+import { Badges } from '../../BadgesCaption';
+import { ProfileAvatar } from '../../Avatars'
+import { Typography } from "../../../foundation/Typography";
+
+
+export default function TalkDetailCard(props) {
+  const badgeLeftIconColor = HDSColor(props.badgeLeftIconColor);
+  return (
+    <div>
+      <Badges
+        color={props.badgeColor}
+        leftIconColor={badgeLeftIconColor}
+        leftIconVariant='home03'
+        size='default'
+      >
+        {props.talk_type}
+      </Badges>
+      <Typography textStyle='h6' className='text-blue-600 uppercase pt-4 pb-2'>{props.tag_line}</Typography>
+      <Typography textStyle='h3' as='h3' className='text-blue-900 pb-4'>{props.title}</Typography>
+      {
+        props.social_share && (
+          <div className='flex items-center pb-14'>
+            {
+              props.social_share.map((socialShare, i) => (
+                <div className='mx-2 first:ml-0 last:mr-0'>
+                  <img src={socialShare.img_url} alt={socialShare.img_alt} />
+                </div>
+              ))
+            }
+          </div>
+        )
+      }
+      {
+        props.speaker_card && (
+          <div>
+            <Typography textStyle='h6' as='h6' className='uppercase text-neutral-500 pb-6'>speakers</Typography>
+            {
+              props.speaker_card.map((speaker, i) => (
+                <div className='pb-4 last:pb-0'>
+                  <ProfileAvatar
+                    name={speaker.name}
+                    size='md'
+                    designation={speaker.designation}
+                    imageUrl={speaker.speakerImgUrl}
+                    avatarVariant="circle"
+                  />
+                </div>
+              ))
+            }
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+TalkDetailCard.defaultProps = {
+  badgeColor: 'green',
+  badgeLeftIconColor: 'stroke-neutral-0',
+  talk_type: 'Talk',
+  tag_line: 'June 20-22, 2023 | VIRTUAL | Free',
+  title: 'Deploying Hasura apps the fast way with the new Vercel integration',
+  social_share: '',
+  speaker_card: '',
+};

package/src/HDS/components/Hero/h2.js

@@ -0,0 +1,198 @@
+import { useState, useEffect } from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSButton } from "../Buttons";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { Icon } from "../common-components";
+import { LinkCard } from '../Cards/Link';
+import { v4 as uuidv4 } from 'uuid';
+
+export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize }) {
+  const [valumeMuteIcon, setValumeMuteIcon] = useState("volumex");
+  const videoMute = () => {
+    if (heroData.video_url) {
+      const videoEle = document.getElementById("hero_vid");
+      if (videoEle?.muted) {
+        videoEle.muted = false;
+        setValumeMuteIcon("volumemax")
+      } else {
+        videoEle.muted = true;
+        setValumeMuteIcon("volumex")
+      }
+    }
+  }
+
+  const videoComponent = (heroData) => (
+    heroData.video_url ? (
+      <div className={"relative" + ((heroData.video_gradient_bg) ? "" : " p-4")}>
+        <div className="w-12 h-12 bg-neutral-0 rounded-full absolute right-8 bottom-8 shadow-md cursor-pointer z-[2] flex items-center justify-center" onClick={() => videoMute()}>
+          <Icon height={'w-6 h-6 stroke-neutral-800 stroke-[1.5px]'} variant={valumeMuteIcon} strokeColor="#1F2A37" />
+        </div>
+        <video
+          id="hero_vid"
+          controls={false}
+          // autoPlay
+          loop
+          muted
+          poster="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png"
+          className={"tb:w-full w-full " + ((heroData.video_gradient_bg) ? "" : " rounded-xl shadow-md")}
+        >
+          <source
+            src={heroData.video_url}
+            type="video/mp4"
+          />
+        </video>
+        {
+          heroData.video_gradient_bg && (<div className={`tb-l:w-1/2 w-full h-1/2 tb:h-full absolute left-0 top-0 tb-l:ml-[-4px] tb-l:bg-gradient-to-r ${videoGradientBg} to-transparent bg-gradient-to-b tb:mt-[-4px] tb-l:mt-0`}></div>)
+        }
+      </div>
+    ) : (
+      <div className="w-full"
+        variants={{
+          hidden: {
+            opacity: 0,
+          },
+          visible: {
+            opacity: 1,
+            transition: {
+              delay: .2,
+              duration: 1,
+            }
+          },
+        }}
+      >
+        {heroData.img_url && (
+          <div className="text-right pt-0 flex items-end justify-end h-full">
+            <img
+              src={heroData.img_url}
+              alt="Hero"
+              className="db:inline tb:w-[90%] tb-l:w-[70%] db:w-[75%] w-full rounded-b-3xl"
+            />
+          </div>
+        )}
+      </div>
+    )
+  )
+
+  const title = () => (
+    heroData.title && (
+      <div
+
+      >
+        {
+          logo ? (
+            <div className={"pb-4 db:text-left text-center tb-l:text-left" + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>
+              <img className="w-[290px] inline-block" src={logo} alt="Brand" />
+            </div>
+          ) : (
+            <Typography textStyle={fontSize ? fontSize : "h1"} as="h1" className={"pb-2 text-center break-words db:text-left tb-l:text-left  " + ((heroData.title_color) ? heroData.title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.title}</Typography>
+          )
+        }
+      </div>
+    )
+  )
+
+  const heroButton = () => (
+    heroData.buttons && (
+      <div className={" gap-2 flex items-center justify-center tb-l:justify-start db:justify-start pt-6" + ((heroData.video_url) ? " tb:justify-center" : " tb:justify-start")}>
+        {
+          heroData.buttons.map((btn, index) => (
+            <HDSButton
+              leftIconVariant='none'
+              rightIconVariant='none'
+              label={btn.cta_text}
+              state='default'
+              size='lg'
+              rightAnimatedArrow='true'
+              rightAnimatedArrowColor='#ffffff'
+            />
+          ))
+        }
+      </div>
+    )
+  )
+
+  const LinkCardsFn = (heroData) => {
+    return (
+      heroData.linkCards && (
+        <div className="flex mt-16 px-20 pb-20 gap-6 justify-center">
+          {heroData.linkCards.map((card) => (
+            <div key={uuidv4()} className="w-full">
+              <LinkCard
+                linkUrl={card.linkUrl}
+                cardBgColor={card.cardBgColor}
+                cardHoverBg={card.cardHoverBg}
+                iconVariant={card.iconVariant}
+                iconStrokeColor={card.iconStrokeColor}
+                iconArrowVariant={card.iconArrowVariant}
+                iconArrowStrokeColor={card.iconArrowStrokeColor}
+                title={card.title}
+                description={card.description}
+              />
+            </div>
+          ))}
+        </div>
+      )
+    );
+  };
+
+  const imageCard = (heroData) => (
+    heroData.imageUrl && (
+      <div className="px-20 py-20">
+        <img src={heroData.imageUrl} alt={heroData.imageAlt} />
+      </div>
+    )
+  )
+  
+  const videoGradientBg = HDSColor(heroData.video_gradient_bg);
+  return (
+    <div className="db:pt-32 mb-10 db:mb-5 tb:mb-16 tb-l:mb-0">
+      <div className="tb:px-4">
+        <div className={"max-w-7xl mx-auto rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
+          <div className="w-full">
+            <div className={"db:flex db:w-full tb-l:flex block" + ((heroData.video_url) ? " tb:block" : " tb:flex")}>
+              <div className={"db:px-20 db:py-20 db:pr-0 tb-l:self-center tb-l:min-w-[400px] mx-auto db:ml-0 db:max-w-[625px] db:min-w-[625px] p-5 pt-10 z-[1] tb:p-16 tb-l:py-12" + ((heroData.video_url) ? " tb:max-w-[530px]" : " tb:ml-0 tb:max-w-[290px] tb:min-w-[310px] tb:pr-0")}
+              >
+                {
+                  heroData.tag_line && (
+                    <div
+                    >
+                      <Typography textStyle="h6" as="h6" className={"pb-2 uppercase text-center db:text-left font-normal tb-l:text-left " + ((heroData.tag_line_color) ? heroData.tag_line_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}
+                      >
+                        {heroData.tag_line}
+                      </Typography>
+                    </div>
+                  )
+                }
+                {title(heroData)}
+                {
+                  heroData.sub_title && (
+                    <Typography textStyle="sub1" className={"text-center db:text-left tb-l:text-left " + ((heroData.sub_title_color) ? heroData.sub_title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.sub_title}</Typography>
+                  )
+                }
+
+                {
+                  heroData.description && (
+                    <Typography textStyle="sub2" className="text-center tb:text-left db:text-left tb-l:text-left text-blue-700 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
+                  )
+                }
+                {heroButton(heroData)}
+
+                
+              </div>
+              {imageCard(heroData)}
+            </div>
+
+            {LinkCardsFn(heroData)}
+
+          </div>
+        </div>
+        {
+          scrollArrow && (
+            <>
+            </>
+          )
+        }
+      </div>
+    </div>
+  );
+}

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

@@ -1 +1,2 @@
-export {default as Hero1} from './h1'
+export {default as Hero1} from './h1'
+export {default as HeroSecondary} from './h2'

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

@@ -1 +1,2 @@
-export {default as TableA} from './tableA';
+export {default as TableA} from './tableA';
+export {default as TableB} from './tableB';

package/src/HDS/components/Tables/tableB.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { Typography } from '../../foundation/Typography'
+
+const test = (TABLE_HEADER) => (
+    console.log(TABLE_HEADER[0]['title']),
+    Object.keys(TABLE_HEADER[0]).map((key, value) => (
+      
+        <th
+            key={key}
+            scope="col"
+            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+        >
+            {key}
+        </th>
+    ))
+)
+
+export default function TableB(props) {
+    const {
+        title,
+        description,
+        TABLE_VALUE,
+        TABLE_HEADER,
+        children
+
+    } = props;
+    test(TABLE_HEADER);
+    return (
+        <div className="px-4 sm:px-6 lg:px-8 ">
+            <div className="sm:flex sm:items-center ">
+                <div className="sm:flex-auto flex flex-col items-center">
+                    {title && (
+                        <Typography
+                            textStyle='h2'>
+                            {title}
+                        </Typography>
+                    )
+                    }
+                    {description && (
+                        <Typography
+                            textStyle='body1c'>
+                            {description}
+                        </Typography>
+                    )
+                    }
+                </div>
+            </div>
+
+            <div>
+                <div className="-mx-4 mt-8 sm:-mx-0">
+                    <table className="min-w-full divide-y divide-gray-300 border">
+                        <thead>
+                            <tr>
+                                {Object.keys(TABLE_HEADER[0]).map((key, value) => (
+                                    <th
+                                        key={key}
+                                        scope="col"
+                                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+                                    >
+                                        {}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-200 bg-white">
+                            {TABLE_VALUE.map((value) => (
+                                <tr key={uuidv4()}>
+                                    {Object.keys(value).map((key) => (
+                                        <td
+                                            key={uuidv4()}
+                                            className=" py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-3"
+                                        >
+                                            {``}{value[key]}
+
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    )
+}