hds-web 1.2.9 → 1.3.0

package/package.json

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

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

@@ -6,18 +6,18 @@ import { Icon } from '../common-components/Icon';
 export default function HasConAvatar({ name, designation, size, imageUrl }) {
     const hasImageUrl = imageUrl && imageUrl.length > 0;
     return (
-        <div className={`${size} group flex-shrink-0 rounded-2xl flex items-center justify-between bg-neutral-0 tb:inline-flex tb:flex-col shadow hover:shadow-xl tb:min-w-[18rem]`}>
+        <div className={`${size} group rounded-3xl flex items-center justify-between bg-neutral-0 tb:inline-flex tb:flex-col shadow hover:shadow-xl tb:min-w-[18rem]`}>
 
-            <div className="mx-5 tb:flex-col tb:flex tb:items-center tb:p-8 tb:ml-0 bg-neutral-0">
+            <div className="tb:flex-col tb:flex tb:items-center tb:px-8 tb:pb-8 tb:mt-8 tb:ml-0 bg-neutral-0 text-center">
                 <Typography textStyle='body1c-bold' className='text-blue-400'>{name}</Typography>
                 <Typography textStyle='body3c-medium' className='text-blue-800'>{designation}</Typography>
             </div>
             <div className='relative '>
                 <img
-                    className={`inline-block w-[9rem] tb:min-w-[18rem] tb:rounded-2xl border-neutral-0 rounded-r-2xl `}
+                    className={`inline-block w-[9rem] tb:min-w-[18rem] tb:rounded border-neutral-0 rounded-r-2xl `}
                     src={imageUrl}
                 />
-                 <div className="absolute rounded-b-2xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div>
+                 <div className="absolute rounded-b-3xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div>
             </div>
 
 

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

@@ -44,6 +44,7 @@ const Buttonclasses = {
     },
     'disabled': 'bg-neutral-200 text-neutral-400',
   },
+  
   'ghost': {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full  justify-center text-blue-600',

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

@@ -13,7 +13,7 @@ export default function LinkCard(props) {
         <>
             <a
                 href={props.linkUrl}
-                className={`${cardHoverClasses} ${cardBgColorClass} min-w-[15rem] rounded-2xl border border-neutral-150 p-6 block`}
+                className={`${cardHoverClasses} ${cardBgColorClass} min-w-[11.5rem] rounded-2xl border border-neutral-150 p-6 block`}
             >
                 {props.brandImageUrl ?
                     (
@@ -45,7 +45,7 @@ export default function LinkCard(props) {
                                     <Typography
                                         as="h5"
                                         textStyle="body1c-bold"
-                                        className="text-neutral-1000">
+                                        className={HDSColor(props.titleTextColor)}>
                                         {props.title}
                                     </Typography>
                                 </div>
@@ -60,7 +60,7 @@ export default function LinkCard(props) {
                             {props.description &&
                                 (<Typography
                                     textStyle="body3"
-                                    className="text-neutral-1000 mt-2">
+                                    className={`${HDSColor(props.descTextColor)} mt-2`}>
                                     {props.description}
                                 </Typography>)}
                         </>
@@ -75,7 +75,6 @@ LinkCard.defaultProps = {
     brandImageUrl: '',
     brandImageAlt:'',
     linkUrl: '#',
-    cardBgColor: 'bg-neutral-0',
     cardHoverBg: 'bg-neutral-0',
     iconVariant: 'videorecorder',
     iconStrokeColor: 'blue-500',

package/src/HDS/components/Cards/Misc/iconCard.js

@@ -3,7 +3,7 @@ import { Icon } from "../../common-components/Icon";
 import { HDSColor } from '../../../foundation/ColorPalette'
 import { Typography } from '../../../foundation/Typography'
 import { HDSButton } from "../../Buttons";
-
+import ReactMarkdown from "react-markdown";
 const cardVariant = {
     "withButton": {
         'cardStyle': 'p-10 ',
@@ -63,12 +63,14 @@ export default function IconCard(props) {
                                 >
                                     {props.title}
                                 </Typography>
+
                                 <Typography
                                     textStyle={cardVariant[props.cardType]['descTextStyle']}
-                                    className={cardVariant[props.cardType]['descClasses']}
-
+                                    className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
                                 >
-                                    {props.description}
+                                    <ReactMarkdown>
+                                        {props.description}
+                                    </ReactMarkdown>
                                 </Typography>
                             </>
                         )

package/src/HDS/components/Headers/v3Header.js

@@ -5,6 +5,7 @@ import { Icon } from '../common-components/Icon';
 import { Typography } from '../../foundation/Typography';
 import { HDSButton } from '../Buttons';
 import { V3Dropdown } from '../Cards/Dropdown'
+import { HDSColor } from '../../foundation/ColorPalette';
 
 const solutions = [
     {
@@ -45,11 +46,11 @@ export default function V3Header(props) {
             leaveTo="opacity-0 translate-y-1"
         >
             <Popover.Panel className="fixed left-0 ml z-10 mt-3 transform ">
-            <div className='ml-[9.55rem]'>
-            <Icon variant='triangle' height='h-6 w-6 fill-neutral-100' strokeClass='stroke-neutral-100'/>
-            </div>
+                <div className='ml-[9.55rem]'>
+                    <Icon variant='triangle' height='h-6 w-6 fill-neutral-100' strokeClass='stroke-neutral-100' />
+                </div>
                 <div className=" p-2 bg-neutral-100 rounded-lg">
-                    
+
                     <V3Dropdown
                         primaryCard={{
                             iconVariant: 'home03',
@@ -106,7 +107,7 @@ export default function V3Header(props) {
                             }
                         ]}
                     />
-                   
+
                 </div>
             </Popover.Panel>
         </Transition>
@@ -121,7 +122,7 @@ export default function V3Header(props) {
                         <>
                             <Popover.Button
                                 className={classNames(
-                                    open ? 'text-pink-800' : 'text-gray-500',
+                                    open ? '' : 'text-gray-500',
                                     'group inline-flex items-center rounded-md bg-white hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
                                 )}
                             >
@@ -143,58 +144,70 @@ export default function V3Header(props) {
 
     return (
         <Popover className="relative">
-            <div className="flex items-center bg-neutral-50 justify-between p-6 md:justify-start md:space-x-6">
-                <div>
+            <div className={`flex items-center ${HDSColor(props.headerBg)} justify-between p-6 tb-l:justify-between tb-l:space-x-6`}>
+                <div className='flex items-center'>
                     <a href={props.headerUrl} className="flex items-center">
                         <Icon height='w-[103px] h-[33px]' variant={'hasuraPrimary'} strokeColor={''} />
                     </a>
-                </div>
-                <div className="tb:hidden">
-                    <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
-                        <span className="sr-only">Open menu</span>
-                        <div className=' gap-6 flex'>
-                            {/* <Icon height={'h-5 w-5'} variant={'searchsm'} strokeColor={'#3970FD'} /> */}
-                            <Icon height={'h-5 w-5'} variant={'menu05'} strokeColor={'#3970FD'} />
-                        </div>
-                    </Popover.Button>
-                </div>
-                <div className="hidden tb:flex tb:flex-1 tb:items-center tb:justify-between">
-                    <Popover.Group as="nav" className="flex space-x-6">
+                    <Popover.Group as="nav" className="hidden tb-l:pl-8 tb-l:flex tb-l:space-x-6">
                         {headerListfn(props.HEADER_LIST)}
                     </Popover.Group>
+                </div>
+                <div className='flex tb-l:justify-between'>
+                    <div className=" tb-l:flex tb-l:flex-1 tb-l:items-center tb-l:justify-between">
 
+                        <div className="flex items-center gap-4 tb-l:ml-12">
 
-                    <div className="flex items-center gap-6 md:ml-12">
-
-                        {/* <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} /> */}
-                        <HDSButton
-                            label="Log In"
-                            type='tonal'
-                            leftIconVariant='none'
-                            rightIconVariant='none'
-                            state='default'
-                            size='sm'
-                            rightAnimatedArrow='true'
-                            rightAnimatedArrowColor='#3970FD'
-                            animatedHoverStroke='group-hover:stroke-neutral-0'
-                        />
-                        <HDSButton
-                            label="Get Started"
-                            type='primary'
-                            leftIconVariant='none'
-                            rightIconVariant='none'
-                            state='default'
-                            size='sm'
-                            rightAnimatedArrow='true'
-                            rightAnimatedArrowColor='#ffffff'
-                            animatedHoverStroke='group-hover:stroke-neutral-0'
-                        />
+                            {/* <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} /> */}
+                            <div>
 
-                    </div>
+                            </div>
+                            <a href='' className='hidden tb:flex'>
+                                <Typography textStyle='body3c-medium' className='text-neutral-800'>
+                                    Contact Sales
+                                </Typography>
+                            </a>
+                            <HDSButton
+                                label="Log In"
+                                type='tonal'
+                                leftIconVariant='none'
+                                rightIconVariant='none'
+                                state='default'
+                                size='sm'
+                                rightAnimatedArrow='true'
+                                rightAnimatedArrowColor='#3970FD'
+                                animatedHoverStroke='group-hover:stroke-neutral-0'
+                                className='hidden tb-l:flex'
+                            />
+                            <HDSButton
+                                label="Get Started"
+                                type='primary'
+                                leftIconVariant='none'
+                                rightIconVariant='none'
+                                state='default'
+                                size='sm'
+                                rightAnimatedArrow='true'
+                                rightAnimatedArrowColor='#ffffff'
+                                animatedHoverStroke='group-hover:stroke-neutral-0'
+                                className='hidden tb:flex'
+                            />
+
+                        </div>
 
 
 
+                    </div>
+                    <div className="tb-l:hidden flex items-center">
+                        <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white pl-6 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                            <span className="sr-only">Open menu</span>
+                            <div className=' gap-6 flex'>
+                                {/* <Icon height={'h-5 w-5'} variant={'searchsm'} strokeColor={'#3970FD'} /> */}
+                                <Icon height={'h-5 w-5'} variant={'menu05'} strokeColor={'#3970FD'} />
+                            </div>
+                        </Popover.Button>
+                    </div>
                 </div>
+
             </div>
 
             <Transition
@@ -206,12 +219,12 @@ export default function V3Header(props) {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
             >
-                <Popover.Panel focus className="absolute h-[calc(100%-112px)] bg-base-0 z-[1] inset-x-0 top-0 origin-top-right transform transition md:hidden">
-                    <div className=" rounded-lg bg-white h-[calc(100%-112px)]  shadow-lg">
-                        <div className="">
+                <Popover.Panel focus className="absolute h-[calc(100%-112px)] bg-base-0 z-[1] inset-x-0 top-0 origin-top-right transform transition tb-l:hidden">
+                    <div className=" rounded-lg bg-neutral-0 h-[calc(100%-112px)]  shadow-lg">
+                        <div className="bg-neutral-0">
                             <div className="flex items-center justify-end">
                                 <div className="">
-                                    <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 w-full">
+                                    <Popover.Button className="inline-flex items-center justify-center pt-4 pr-4 w-full focus:ring-0">
                                         <Icon height={'h-5 w-5'} variant={'xclose'} strokeColor={'#3970FD'} />
                                     </Popover.Button>
                                 </div>
@@ -252,33 +265,35 @@ export default function V3Header(props) {
                         <div className="py-6 px-5 ">
                             <div className="mt-6 ">
                                 <div className='flex flex-row justify-around'>
-                                    <div className='w-full '>
-                                        <HDSButton
-                                            label="Log In"
-                                            type='tonal'
-                                            leftIconVariant='none'
-                                            rightIconVariant='none'
-                                            state='default'
-                                            size='sm'
-                                            rightAnimatedArrow='true'
-                                            rightAnimatedArrowColor='#3970FD'
-                                            animatedHoverStroke='group-hover:stroke-neutral-0'
-
-                                        />
-                                    </div>
-                                    <div className='w-full'>
-                                        <HDSButton
-                                            label="Sign up"
-                                            type='primary'
-                                            leftIconVariant='none'
-                                            rightIconVariant='none'
-                                            state='default'
-                                            size='sm'
-                                            rightAnimatedArrow='true'
-                                            rightAnimatedArrowColor='#ffffff'
-                                            animatedHoverStroke='group-hover:stroke-neutral-0'
-
-                                        />
+                                    <div className='w-full flex gap-2'>
+                                        <div className='w-1/2'>
+                                            <HDSButton
+                                                label="Log In"
+                                                type='tonal'
+                                                leftIconVariant='none'
+                                                rightIconVariant='none'
+                                                state='default'
+                                                size='sm'
+                                                rightAnimatedArrow='true'
+                                                rightAnimatedArrowColor='#3970FD'
+                                                animatedHoverStroke='group-hover:stroke-neutral-0'
+
+
+                                            />
+                                        </div>
+                                        <div className='w-1/2'>
+                                            <HDSButton
+                                                label="Sign up"
+                                                type='primary'
+                                                leftIconVariant='none'
+                                                rightIconVariant='none'
+                                                state='default'
+                                                size='sm'
+                                                rightAnimatedArrow='true'
+                                                rightAnimatedArrowColor='#ffffff'
+                                                animatedHoverStroke='group-hover:stroke-neutral-0'
+                                            />
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -365,5 +380,5 @@ V3Header.defaultProps = {
         },
 
     ],
-    headerUrl:'https://hasura.io/'
+    headerUrl: 'https://hasura.io/'
 }

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

@@ -0,0 +1,152 @@
+import React, { useState, useEffect } from 'react';
+import { MediaBox } from '../../helpers/Media';
+import { Typography } from '../../foundation/Typography';
+import { HDSButton } from '../../components/Buttons';
+import { HDSColor } from '../../foundation/ColorPalette';
+import { Tab } from '../../components/Tabs';
+import PropTypes from 'prop-types';
+import { LinkCard } from '../Cards/Link';
+
+const tabCard = (tabContent) => (
+    <>
+        <div className='tb:px-3'>
+            {tabContent.title &&
+                <Typography
+                    textStyle='h2'
+                    className={HDSColor(tabContent.title_color)}>
+                    {tabContent.title}
+                </Typography>}
+
+            {tabContent.sub_title &&
+                <Typography
+                    textStyle='sub2'
+                    className={`mt-2 ${HDSColor(tabContent.sub_title_color)}`}>
+                    {tabContent.sub_title}
+                </Typography>}
+        </div>
+        {tabContent.btnLabel &&
+            <div className='flex pl-3 pt-6'>
+                <HDSButton
+                    label={tabContent.btnLabel}
+                    type='secondary'
+                    leftIconVariant='none'
+                    rightIconVariant='none'
+                    state='default'
+                    size='sm'
+                    rightAnimatedArrow={true}
+                    rightAnimatedArrowColor='#1E56E3'
+                    animatedHoverStroke='group-hover:stroke-blue-600'
+                    className='flex'
+                    btnTextColorClass='text-blue-600'
+                />
+            </div>
+        }
+
+    </>
+)
+
+export default function HeroCapability(props) {
+
+    const LinkCardsFn = (heroData) => {
+        return (
+          heroData.linkCards && (
+            <div className="flex mt-16 gap-6 justify-center">
+              {heroData.linkCards.map((card, index) => (
+                <div key={index} className="w-full">
+                  <LinkCard
+                  titleTextColor= {card.titleTextColor}
+                    descTextColor={card.descTextColor}
+                    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 [activeTab, setActiveTab] = useState('');
+
+    useEffect(() => {
+        if (props.heroData.tabContent) {
+            const tabNames = Object.keys(props.heroData.tabContent);
+            setActiveTab(tabNames[0]);
+        }
+    }, [props.heroData.tabContent]);
+
+    const handleTabClick = (tab) => {
+        if (tab.name) {
+            setActiveTab(tab.name);
+        }
+        else return;
+        // Perform any other actions based on the clicked tab
+    }
+    let bgClass = '';
+    let bgTabClass = '';
+    let video_url = '';
+    let video_poster = '';
+    let img_url = '';
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bg_color']){
+        bgClass = HDSColor(props.heroData.tabContent[activeTab]['bg_color'])
+    }
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bg_color_tab']){
+        bgTabClass = HDSColor(props.heroData.tabContent[activeTab]['bg_color_tab'])
+    }
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['video_url']){
+        video_url = props.heroData.tabContent[activeTab]['video_url']
+    }
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['video_poster']){
+        video_poster = props.heroData.tabContent[activeTab]['video_poster']
+    }
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['img_url']){
+        img_url = props.heroData.tabContent[activeTab]['img_url']
+    }
+
+    return (
+        <div className={`${bgClass} max-w-7xl rounded-3xl`} >
+            {props.heroData.navTabs &&
+
+                <div className='pt-5 px-8 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
+
+                    <div className='flex overflow-visible scrollbar-hide tb-l:justify-center justify-start'>
+                        <div className={`${bgTabClass} rounded-[32px]`}>
+                            <Tab
+                                onTabClick={handleTabClick}
+                                tabs={props.heroData.navTabs}
+                            />
+                        </div>
+                    </div>
+                    <div className='flex flex-col-reverse pt-6 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
+                        <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
+                            {props.heroData.tabContent &&
+                                props.heroData.tabContent[activeTab] &&
+                                tabCard(props.heroData.tabContent[activeTab])}
+                        </div>
+                        <div className=' db:max-w-[540px] tb:w-1/2 '>
+                            <MediaBox
+                                video_url = {video_url}
+                                video_poster = {video_poster}
+                                img_url = {img_url}
+                            />
+                        </div>
+                    </div>
+
+                    <div>
+                        {LinkCardsFn(props.heroData)}
+                     </div>   
+                </div>
+
+            }
+
+        </div>
+    )
+}

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

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

package/src/HDS/components/Tabs/tab.js

@@ -27,7 +27,7 @@ export default function Tab(props) {
   };
 
   return (
-    <div>
+    <div className=''>
       <div className="block">
         <nav className="relative inline-flex gap-2 rounded-full" aria-label="Tabs">
           {tabs.map(tab => (
@@ -36,8 +36,8 @@ export default function Tab(props) {
               href="#"
               className={`px-3 py-1 font-medium text-sm rounded-full ${
                 activeTab === tab
-                  ? ' first:bg-blue-500  text-neutral-0 transition-all  delay-100 duration-100 '
-                  : 'text-neutral-500 transition-all delay-200  flex-nowrap '
+                  ? ' first:bg-blue-500  text-neutral-0 transition-all  delay-500 duration-100 '
+                  : 'text-neutral-500 transition-all flex-nowrap '
               }`}
               aria-current={activeTab === tab ? 'page' : undefined}
               onClick={(event) => handleTabClick(event, tab)}

package/src/HDS/foundation/Typography/Typography.js

@@ -16,6 +16,7 @@ export default function Typography(props) {
         'h4': 'text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
         'h5': 'text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
         'h6': 'text-hds-m-h6 tb:text-hds-t-h6 db:text-hds-d-h6',
+        'h7': 'text-hds-m-h7 tb:text-hds-t-h7 db:text-hds-d-h7',
         'sub1': 'text-hds-m-sub1 tb:text-hds-t-sub1 db:text-hds-d-sub1',
         'sub2': 'text-hds-m-sub2 tb:text-hds-t-sub2 db:text-hds-d-sub2',
         'body1': 'text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1',

package/src/HDS/helpers/Grid/grid.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+const GridComponent = ({ cards, gridSize }) => {
+  const numCards = cards.length;
+  const cardsLeftInLastRow = numCards % gridSize;
+  const lastRowColSpan = `col-span-${gridSize / cardsLeftInLastRow}`;
+
+  const renderCards = () => {
+    return cards.map((card, index) => (
+      <div
+      className='gridClass'
+        key={index}
+      >
+        {/* Render card content */}
+        {card}
+      </div>
+    ));
+  };
+
+  return (
+    <div className='flex flex-wrap'>
+      {renderCards()}
+    </div>
+  );
+};
+
+export default GridComponent;
+
+
+
+
+// 2x2, 3x3, 4x4
+// odd even 
+
+//2x2 -odd grid grid-cols-2
+    //case 1: NOC = 3 
+    //                 .... .... 
+    //                 ......... colr-span-2  
+
+
+//3x3 -odd 
+    //case 1: noc:5
+    ///              ... ... ...
+            //       ..... ..... col-span-1.5 col-span-1.5
+    //case 2: noc:4
+    ///              ... ... ...
+            //       ........... col-span-3
+
+
+
+//4x4 
+
+// case1: noc 5:   
+//                  .. .. .. ..
+//                  ........... col-span-4
+// case2: noc 6:   
+//                  .. .. .. ..
+//                  ..... ..... col-span-2 col span-2
+// case1: noc 7:   
+//                  .. .. .. ..
+//                  ... ... ... col-span-4/3 col-span-4/3 col-span-4/3

package/src/HDS/helpers/Grid/index.js

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

package/src/HDS/helpers/Media/mediabox.js

@@ -20,7 +20,7 @@ export default function MediaViewer ({ img_url, video_url, video_poster, width }
         </div>
       )}
 
-      {video_url && video_poster && (
+      {video_url && !img_url && video_poster && (
         <div>
           {!isVideoPlaying ? (
             <div className='relative flex justify-center'>

package/src/index.css

@@ -3,6 +3,15 @@
 @tailwind utilities;
 /* Typography classes */
 
+.gridAutoClass {
+  flex: 1 0 30%;
+  margin-top: 40px;
+  margin-right: 32px;
+  background: blue;
+  justify-content: center;
+  display: flex;
+}
+
 @keyframes pill-move-left {
   0% {
     left: 0;