jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Refactor CollectionCardComponent to handle flow icons and backgrounds

Browse source
This commit is contained in:
anovazzi1 2024-03-06 15:05:53 -03:00
commit f44776934d
1 changed files with 19 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/frontend/src/components/exampleComponent/index.tsx
View file

@ -15,10 +15,10 @@ import {
} from "../ui/card"; } from "../ui/card";
export default function CollectionCardComponent({ export default function CollectionCardComponent({
flow, flow,
}: { }: {
flow: FlowType; flow: FlowType;
authorized?: boolean; authorized?: boolean;
}) { }) {
const addFlow = useFlowsManagerStore((state) => state.addFlow); const addFlow = useFlowsManagerStore((state) => state.addFlow);
const navigate = useNavigate(); const navigate = useNavigate();
@ -35,18 +35,25 @@ export default function CollectionCardComponent({
<CardHeader> <CardHeader>
<div> <div>
<CardTitle className="flex w-full items-center justify-between gap-3 text-xl"> <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
{flow.icon && ( {flow.icon && isEmoji(flow.icon) && (
<div className="flex-shrink-0 h-7 w-7"> <div className="p-2 rounded-md flex align-middle items-center justify-center" style={{ backgroundColor: flow.icon_bg_color }}>
{flow.icon}
<div className="pl-0.5 h-7 w-7">
{flow.icon}
</div>
</div> </div>
)} )}
{!flow.icon && <IconComponent {(!flow.icon || !isEmoji(flow.icon)) &&
className={cn( <div className="p-2 rounded-md flex align-middle items-center justify-center" style={{ backgroundColor: flow.icon_bg_color }}>
"flex-shrink-0 h-7 w-7 text-flow-icon", <IconComponent
)} className={cn(
name="Group" "flex-shrink-0 h-7 w-7 text-flow-icon",
/>} )}
name={flow.icon || "Group"}
/>
</div>
}
<ShadTooltip content={flow.name}> <ShadTooltip content={flow.name}>
<div className="w-full truncate">{flow.name}</div> <div className="w-full truncate">{flow.name}</div>
</ShadTooltip> </ShadTooltip>