Merge pull request #73 from janhq/chore/small-ui-fix

chore: remove the grid on blank chat screen
This commit is contained in:
NamH 2023-09-06 08:19:30 -07:00 committed by GitHub
commit 0cfca5b6ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 21 deletions

View File

@ -6,22 +6,28 @@ type Props = {
products: ProductDetailFragment[]; products: ProductDetailFragment[];
}; };
const GenerateImageList: React.FC<Props> = ({ products }) => ( const GenerateImageList: React.FC<Props> = ({ products }) => {
<div className="pb-4"> if (products.length === 0) {
<div className="flex mt-4 justify-between"> return <div></div>;
<div className="gap-4 flex items-center"> }
<Image src={"icons/ic_image.svg"} width={20} height={20} alt="" />
<h2 className="text-gray-900 font-bold dark:text-white"> return (
Generate Images <div className="pb-4">
</h2> <div className="flex mt-4 justify-between">
<div className="gap-4 flex items-center">
<Image src={"icons/ic_image.svg"} width={20} height={20} alt="" />
<h2 className="text-gray-900 font-bold dark:text-white">
Generate Images
</h2>
</div>
</div>
<div className="mt-2 grid grid-cols-2 gap-6 sm:gap-x-6 md:grid-cols-4 md:gap-8">
{products.map((item) => (
<GenerateImageCard key={item.name} product={item} />
))}
</div> </div>
</div> </div>
<div className="mt-2 grid grid-cols-2 gap-6 sm:gap-x-6 md:grid-cols-4 md:gap-8"> );
{products.map((item) => ( };
<GenerateImageCard key={item.name} product={item} />
))}
</div>
</div>
);
export default GenerateImageList; export default GenerateImageList;

View File

@ -43,12 +43,10 @@ const NewChatBlankState: React.FC = () => {
} }
return ( return (
<div className="grid"> <div className="bg-gray-100 px-6 pt-8 w-full h-full overflow-y-scroll scroll">
<div className="bg-gray-100 px-6 pt-8 w-full h-full overflow-y-scroll scroll"> <Slider products={featured} />
<Slider products={featured} /> <ConversationalList products={conversational} />
<ConversationalList products={conversational} /> <GenerateImageList products={generativeArts} />
<GenerateImageList products={generativeArts} />
</div>
</div> </div>
); );
}; };