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[];
};
const GenerateImageList: React.FC<Props> = ({ products }) => (
<div className="pb-4">
<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>
const GenerateImageList: React.FC<Props> = ({ products }) => {
if (products.length === 0) {
return <div></div>;
}
return (
<div className="pb-4">
<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 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;

View File

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