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

feat: Add card component and unused extrasidebar tailwind constants classes

Browse source
This commit is contained in:
Igor Carvalho 2023-07-05 18:13:32 -03:00
commit d0621efd1c
3 changed files with 102 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/frontend/src/components/ExtraSidebarComponent/index.tsx
View file

@ -18,13 +18,13 @@ export default function ExtraSidebar() {
<aside <aside
className={` ${ className={` ${
isStackedOpen ? "w-52" : "w-0 " isStackedOpen ? "w-52" : "w-0 "
} flex flex-shrink-0 flex-col overflow-hidden border-r transition-all duration-500`} } unused-side-bar-aside`}
> >
<div className="flex h-full w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide"> <div className="unused-side-bar-arrangement">
<div className="flex w-full flex-grow flex-col"> <div className="unused-side-bar-division">
{extraNavigation.options ? ( {extraNavigation.options ? (
<div className="p-4"> <div className="p-4">
<nav className="flex-1 space-y-1"> <nav className="unused-side-bar-nav">
{extraNavigation.options.map((item) => {extraNavigation.options.map((item) =>
!item.children ? ( !item.children ? (
<div key={item.name}> <div key={item.name}>
@ -32,17 +32,17 @@ export default function ExtraSidebar() {
to={item.href} to={item.href}
className={classNames( className={classNames(
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "bg-muted text-foreground" ? "unused-side-bar-link-colors-true"
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground", : "unused-side-bar-link-colors-false",
"group flex w-full items-center rounded-md py-2 pl-2 text-sm font-medium" "unused-side-bar-link"
)} )}
> >
<item.icon <item.icon
className={classNames( className={classNames(
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "text-ring" ? "text-ring"
: "text-ring group-hover:text-accent-foreground", : "unused-side-bar-icon-false",
"mr-3 flex-shrink-0 h-6 w-6" "unused-side-bar-icon"
)} )}
/> />
{item.name} {item.name}
@ -59,20 +59,20 @@ export default function ExtraSidebar() {
<Disclosure.Button <Disclosure.Button
className={classNames( className={classNames(
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "bg-muted text-foreground" ? "unused-side-bar-link-colors-true"
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground", : "unused-side-bar-link-colors-false",
"group flex w-full items-center rounded-md py-2 pl-2 pr-1 text-left text-sm font-medium focus:outline-none focus:ring-1 focus:ring-ring" "unused-side-bar-disclosure"
)} )}
> >
<item.icon <item.icon
className="mr-3 h-6 w-6 flex-shrink-0 text-ring group-hover:text-accent-foreground" className="unused-side-bar-disclosure-icon"
aria-hidden="true" aria-hidden="true"
/> />
<span className="flex-1">{item.name}</span> <span className="flex-1">{item.name}</span>
<svg <svg
className={classNames( className={classNames(
open ? "text-ring rotate-90" : "text-ring", open ? "unused-side-bar-svg-true" : "text-ring",
"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-accent-foreground" "unused-side-bar-svg"
)} )}
viewBox="0 0 20 20" viewBox="0 0 20 20"
aria-hidden="true" aria-hidden="true"
@ -90,9 +90,9 @@ export default function ExtraSidebar() {
to={subItem.href} to={subItem.href}
className={classNames( className={classNames(
subItem.href.split("/")[3] === current[5] subItem.href.split("/")[3] === current[5]
? "bg-muted text-foreground" ? "unused-side-bar-link-colors-true"
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground", : "unused-side-bar-link-colors-false",
"group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium" "unused-side-bar-disclosure-panel"
)} )}
> >
{subItem.name} {subItem.name}

18
src/frontend/src/components/cardComponent/index.tsx
View file

@ -28,24 +28,24 @@ export const CardComponent = ({
return ( return (
<Card className="group"> <Card className="group">
<CardHeader> <CardHeader>
<CardTitle className="flex w-full items-center gap-4"> <CardTitle className="card-component-title-display">
<span <span
className={ className={
"flex h-7 w-7 items-center justify-center rounded-full text-2xl " + "card-component-image " +
gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length] gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length]
} }
></span> ></span>
<span className="inline-block w-full flex-1 break-words truncate-doubleline"> <span className="card-component-title-size">
{flow.name} {flow.name}
</span> </span>
{onDelete && ( {onDelete && (
<button className="flex self-start" onClick={onDelete}> <button className="card-component-delete-button" onClick={onDelete}>
<Trash2 className="h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100" /> <Trash2 className="card-component-delete-icon" />
</button> </button>
)} )}
</CardTitle> </CardTitle>
<CardDescription className="pb-2 pt-2"> <CardDescription className="card-component-desc">
<div className="truncate-doubleline"> <div className="card-component-desc-text">
{flow.description} {flow.description}
{/* {flow.description} */} {/* {flow.description} */}
</div> </div>
@ -53,8 +53,8 @@ export const CardComponent = ({
</CardHeader> </CardHeader>
<CardFooter> <CardFooter>
<div className="flex w-full items-end justify-between gap-2"> <div className="card-component-footer-arrangement">
<div className="flex flex-wrap gap-2"> <div className="card-component-footer">
{/* <Badge variant="secondary">Agent</Badge> {/* <Badge variant="secondary">Agent</Badge>
<Badge variant="secondary"> <Badge variant="secondary">
<div className="w-3"> <div className="w-3">

76
src/frontend/src/index.css
View file

@ -354,7 +354,7 @@ The cursor: default; property value restores the browser's default cursor style
.alert-icon { .alert-icon {
@apply h-5 w-5 @apply h-5 w-5
} /*error-build-message-circle*/ }
.alert-font-size { .alert-font-size {
@apply text-sm font-medium @apply text-sm font-medium
} }
@ -387,4 +387,78 @@ The cursor: default; property value restores the browser's default cursor style
.success-alert-message { .success-alert-message {
@apply alert-font-size text-success-foreground @apply alert-font-size text-success-foreground
} }
.card-component-title-display {
@apply round-button-div flex-max-width
}
.card-component-image {
@apply flex h-7 w-7 items-center justify-center rounded-full text-2xl
}
.card-component-title-size {
@apply inline-block w-full flex-1 break-words truncate-doubleline
}
.card-component-delete-button {
@apply flex self-start
}
.card-component-delete-icon {
@apply h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100
}
.card-component-desc {
@apply pb-2 pt-2
}
.card-component-desc-text {
@apply truncate-doubleline
}
.card-component-footer-arrangement {
@apply flex-max-width items-end justify-between gap-2
}
.card-component-footer {
@apply flex flex-wrap gap-2
}
.unused-side-bar-aside {
@apply flex flex-shrink-0 flex-col overflow-hidden border-r transition-all duration-500
}
.unused-side-bar-arrangement {
@apply flex h-full w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide
}
.unused-side-bar-division {
@apply flex-max-width flex-grow flex-col
}
.unused-side-bar-nav {
@apply flex-1 space-y-1
}
.unused-side-bar-link {
@apply flex-max-width items-center rounded-md py-2 pl-2 text-sm font-medium
}
.unused-side-bar-link-colors-true {
@apply bg-muted text-foreground
}
.unused-side-bar-link-colors-false {
@apply bg-background text-muted-foreground hover:bg-muted hover:text-foreground
}
.unused-side-bar-icon {
@apply mr-3 flex-shrink-0 h-6 w-6
}
.unused-side-bar-icon-false {
@apply text-ring group-hover:text-accent-foreground
}
.unused-side-bar-disclosure {
@apply unused-side-bar-link pr-1 text-left
}
.unused-side-bar-disclosure:focus {
@apply focus:outline-none focus:ring-1 focus:ring-ring
}
.unused-side-bar-disclosure-icon {
@apply unused-side-bar-icon text-ring group-hover:text-accent-foreground
}
.unused-side-bar-svg-true {
@apply text-ring rotate-90
}
.unused-side-bar-svg {
@apply ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-accent-foreground
}
.unused-side-bar-disclosure-panel {
@apply flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium
}
} }