Added playground button on Store card

This commit is contained in:
Lucas Oliveira 2024-05-01 05:12:26 +02:00
commit a551308297

View file

@ -249,6 +249,7 @@ export default function CollectionCardComponent({
)} )}
</CardTitle> </CardTitle>
</div> </div>
<div className="flex gap-2">
{data.user_created && data.user_created.username && ( {data.user_created && data.user_created.username && (
<span className="text-sm text-primary"> <span className="text-sm text-primary">
by <b>{data.user_created.username}</b> by <b>{data.user_created.username}</b>
@ -264,16 +265,6 @@ export default function CollectionCardComponent({
)} )}
</span> </span>
)} )}
<CardDescription className="pb-2 pt-2">
<div className="truncate-doubleline">{data.description}</div>
</CardDescription>
</CardHeader>
</div>
<CardFooter>
<div className="flex w-full items-center justify-between gap-2">
<div className="flex w-full flex-wrap items-end justify-between gap-2">
<div className="flex w-full flex-1 flex-wrap gap-2"> <div className="flex w-full flex-1 flex-wrap gap-2">
{data.tags && {data.tags &&
data.tags.length > 0 && data.tags.length > 0 &&
@ -288,28 +279,27 @@ export default function CollectionCardComponent({
</Badge> </Badge>
))} ))}
</div> </div>
{data.liked_by_count != undefined && ( </div>
<div className="flex gap-0.5">
{playground && data?.metadata !== undefined && ( <CardDescription className="pb-2 pt-2">
<ShadTooltip <div className="truncate-doubleline">{data.description}</div>
content={ </CardDescription>
authorized </CardHeader>
? "Playground" </div>
: "Please review your API key."
} <CardFooter>
> <div className="flex w-full items-center justify-between gap-2">
<div className="flex w-full flex-wrap items-end justify-between gap-2">
{playground && data?.metadata !== undefined ? (
<Button <Button
disabled={loadingLike} disabled={loadingPlayground}
variant="ghost" key={data.id}
size="icon" tabIndex={-1}
className={ variant="outline"
"whitespace-nowrap" + size="sm"
(!authorized ? " cursor-not-allowed" : "") className="gap-2 whitespace-nowrap"
} data-testid={"playground-flow-button-" + data.id}
onClick={(e) => { onClick={(e) => {
if (!authorized) {
return;
}
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
setLoadingPlayground(true); setLoadingPlayground(true);
@ -325,22 +315,22 @@ export default function CollectionCardComponent({
}); });
} }
}} }}
data-testid={`playground-${data.name}`}
> >
{!loadingPlayground ? ( {!loadingPlayground ? (
<IconComponent <IconComponent
name="BotMessageSquareIcon" name="BotMessageSquareIcon"
className={cn( className="h-4 w-4 select-none"
"h-5 w-5 select-none",
!authorized ? " text-ring" : ""
)}
/> />
) : ( ) : (
<Loading className="h-4 w-4 select-none text-medium-indigo" /> <Loading className="h-4 w-4 text-medium-indigo" />
)} )}
Playground
</Button> </Button>
</ShadTooltip> ) : (
<div></div>
)} )}
{data.liked_by_count != undefined && (
<div className="flex gap-0.5">
{onDelete && data?.metadata !== undefined ? ( {onDelete && data?.metadata !== undefined ? (
<ShadTooltip <ShadTooltip
content={ content={