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

Badge design changed

Browse source
This commit is contained in:
Lucas Oliveira 2023-11-02 00:08:20 -03:00
commit 0c7c50b474
3 changed files with 65 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/components/ui/badge.tsx
View file

@ -14,12 +14,14 @@ const badgeVariants = cva(
"bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
destructive:
"bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground",
outline: "text-foreground",
outline: "text-primary/80 hover:bg-muted border-ring/60",
},
size: {
sm: "h-4 text-xs",
md: "h-5 text-sm",
lg: "h-6 text-base",
sq: "h-6 text-sm font-medium rounded-md",
xq: "h-5 text-xs font-medium rounded-md",
},
},
defaultVariants: {

4
src/frontend/src/pages/StorePage/components/market-card.tsx
View file

@ -163,9 +163,9 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
data.tags.map((tag, index) => (
<Badge
key={index}
size="md"
className="bg-card"
variant="outline"
size="xq"
className="text-muted-foreground"
>
{tag.name}
</Badge>

94
src/frontend/src/pages/StorePage/index.tsx
View file

@ -2,6 +2,7 @@ import { cloneDeep } from "lodash";
import { Search } from "lucide-react";
import { useContext, useEffect, useRef, useState } from "react";
import PaginatorComponent from "../../components/PaginatorComponent";
import ShadTooltip from "../../components/ShadTooltipComponent";
import IconComponent from "../../components/genericIconComponent";
import Header from "../../components/headerComponent";
import { SkeletonCardComponent } from "../../components/skeletonCardComponent";
@ -161,6 +162,8 @@ export default function StorePage(): JSX.Element {
);
}
const [tabActive, setTabActive] = useState("Flows");
return (
<>
<Header />
@ -191,8 +194,8 @@ export default function StorePage(): JSX.Element {
Search flows and components from the community.
</span>
<div className="flex w-full flex-col gap-4 p-4">
<div className="flex items-center justify-center gap-4">
<div className="relative h-12 w-[35%]">
<div className="flex items-end gap-4">
<div className="relative h-12 w-[40%]">
<Input
placeholder="Search Flows and Components"
className="absolute h-12 px-5"
@ -208,42 +211,64 @@ export default function StorePage(): JSX.Element {
/>
<Search className="absolute bottom-0 right-4 top-0 my-auto h-6 stroke-1 text-muted-foreground " />
</div>
<div className="flex items-center justify-center text-sm">
<Button
<div className="ml-4 flex w-full gap-2 border-b border-border">
<button
onClick={() => {
handleSearch(inputText);
setTabActive("Flows");
}}
className={
tabActive === "Flows"
? "border-b-2 border-primary p-3"
: " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary"
}
>
Search
</Button>
</div>
<div className="flex w-[13%] items-center justify-center gap-3 text-sm">
<Select
onValueChange={(value) => {
if (value === "Flow") {
filterComponent.current = false;
} else if (value === "Component") {
filterComponent.current = true;
} else {
filterComponent.current = null;
}
setPageIndex(1);
setPageSize(10);
handleGetComponents();
Flows
</button>
<button
onClick={() => {
setTabActive("Components");
}}
className={
tabActive === "Components"
? "border-b-2 border-primary p-3"
: " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary"
}
>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Both" />
</SelectTrigger>
<SelectContent>
<SelectItem value="">Both</SelectItem>
<SelectItem value="Flow">Flows</SelectItem>
<SelectItem value="Component">Components</SelectItem>
</SelectContent>
</Select>
Components
</button>
<ShadTooltip content="Coming Soon">
<button className="cursor-not-allowed p-3 text-muted-foreground">
Bundles
</button>
</ShadTooltip>
</div>
</div>
<div className="flex h-2 items-center justify-center gap-4">
<div className="flex items-center gap-3 text-sm">
<Select
onValueChange={(value) => {
if (value === "Flow") {
filterComponent.current = false;
} else if (value === "Component") {
filterComponent.current = true;
} else {
filterComponent.current = null;
}
setPageIndex(1);
setPageSize(10);
handleGetComponents();
}}
>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Both" />
</SelectTrigger>
<SelectContent>
<SelectItem value="">Both</SelectItem>
<SelectItem value="Flow">Flows</SelectItem>
<SelectItem value="Component">Components</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center gap-2">
{!loading &&
tags.map((i, idx) => (
<Badge
@ -258,10 +283,10 @@ export default function StorePage(): JSX.Element {
setFilterCategories(copyFilterArray);
handleFilterByTags(copyFilterArray);
}}
variant="gray"
size="md"
variant="outline"
size="sq"
className={cn(
"cursor-pointer border-none",
"cursor-pointer",
filteredCategories.some((category) => category === i.id)
? "bg-beta-foreground text-background hover:bg-beta-foreground"
: ""
@ -271,6 +296,7 @@ export default function StorePage(): JSX.Element {
</Badge>
))}
</div>
<div className="mt-6 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
{loading ? (
<>