55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import Slider from "../Slider";
|
|
import ConversationalList from "../ConversationalList";
|
|
import GenerateImageList from "../GenerateImageList";
|
|
import { GetProductsQuery, GetProductsDocument } from "@/graphql";
|
|
import { useQuery } from "@apollo/client";
|
|
import Image from "next/image";
|
|
|
|
const NewChatBlankState: React.FC = () => {
|
|
// This can be achieved by separating queries using GetProductsByCollectionSlugQuery
|
|
const { loading, data } = useQuery<GetProductsQuery>(GetProductsDocument, {
|
|
variables: { slug: "conversational" },
|
|
});
|
|
|
|
const featured = [...(data?.products ?? [])]
|
|
.sort(() => 0.5 - Math.random())
|
|
.slice(0, 3);
|
|
|
|
const conversational =
|
|
data?.products.filter((e) =>
|
|
e.product_collections.some((c) =>
|
|
c.collections.some((s) => s.slug == "conversational")
|
|
)
|
|
) ?? [];
|
|
|
|
const generativeArts =
|
|
data?.products.filter((e) =>
|
|
e.product_collections.some((c) =>
|
|
c.collections.some((s) => s.slug == "text-to-image")
|
|
)
|
|
) ?? [];
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="w-full flex flex-row justify-center items-center">
|
|
<Image src="/icons/loading.svg" width={32} height={32} alt="loading" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!data || data.products.length === 0) {
|
|
return <div></div>;
|
|
}
|
|
|
|
return (
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default NewChatBlankState;
|