Knowledge Base Search Result - Copy this React, Tailwind Component to your project

<Col {...styleObj[querySidebar ?? themeOption?.KB?.KB_sidebar_type]?.colClass} className={styleObj[querySidebar ?? themeOption?.KB?.KB_sidebar_type]?.class || ''}> {isLoading ? ( <KBSkeletonComponent queryBoxStyle={queryBoxStyle} /> ) : ( <Row className={`g 4 `}> {KBData?.data?.length > 0 ? ( KBData?.data?.map((KB, i) => ( <Col {...styleObj[queryBoxStyle ?? themeOption?.KB?.KB_style?? "grid_view"].colClass} key={i}> <div className="kb box sticky kb box"> {KB?.is_featured ? ( <div className='kb label tag'> <span>{t('Featured')}</span> </div> ) : null} <KBCardContain KB={KB} /> </div> </Col> )) ) : ( <NoDataFound data={{ customClass: 'no data added', imageUrl: emptyImage, title: 'No Knowledge Found', description: 'Oops! It seems that we could not find any KBs matching your search criteria.', height: 400, width: 400, }} /> )} </Row> )} {KBData?.data.length > 0 && ( <nav className='custome pagination'> <Pagination current_page={KBData?.current_page} total={KBData?.total} per_page={KBData?.per_page} setPage={setPage} /> </nav> )} </Col>Improve design