feat: Add card component and unused extrasidebar tailwind constants classes
This commit is contained in:
Igor Carvalho
parent
9922ea0593
commit
d0621efd1c
3 changed files with 102 additions and 28 deletions
|
|
@ -18,13 +18,13 @@ export default function ExtraSidebar() {
|
|||
<aside
|
||||
className={` ${
|
||||
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="flex w-full flex-grow flex-col">
|
||||
<div className="unused-side-bar-arrangement">
|
||||
<div className="unused-side-bar-division">
|
||||
{extraNavigation.options ? (
|
||||
<div className="p-4">
|
||||
<nav className="flex-1 space-y-1">
|
||||
<nav className="unused-side-bar-nav">
|
||||
{extraNavigation.options.map((item) =>
|
||||
!item.children ? (
|
||||
<div key={item.name}>
|
||||
|
|
@ -32,17 +32,17 @@ export default function ExtraSidebar() {
|
|||
to={item.href}
|
||||
className={classNames(
|
||||
item.href.split("/")[2] === current[4]
|
||||
? "bg-muted text-foreground"
|
||||
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
"group flex w-full items-center rounded-md py-2 pl-2 text-sm font-medium"
|
||||
? "unused-side-bar-link-colors-true"
|
||||
: "unused-side-bar-link-colors-false",
|
||||
"unused-side-bar-link"
|
||||
)}
|
||||
>
|
||||
<item.icon
|
||||
className={classNames(
|
||||
item.href.split("/")[2] === current[4]
|
||||
? "text-ring"
|
||||
: "text-ring group-hover:text-accent-foreground",
|
||||
"mr-3 flex-shrink-0 h-6 w-6"
|
||||
: "unused-side-bar-icon-false",
|
||||
"unused-side-bar-icon"
|
||||
)}
|
||||
/>
|
||||
{item.name}
|
||||
|
|
@ -59,20 +59,20 @@ export default function ExtraSidebar() {
|
|||
<Disclosure.Button
|
||||
className={classNames(
|
||||
item.href.split("/")[2] === current[4]
|
||||
? "bg-muted text-foreground"
|
||||
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
"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-link-colors-true"
|
||||
: "unused-side-bar-link-colors-false",
|
||||
"unused-side-bar-disclosure"
|
||||
)}
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<span className="flex-1">{item.name}</span>
|
||||
<svg
|
||||
className={classNames(
|
||||
open ? "text-ring rotate-90" : "text-ring",
|
||||
"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-accent-foreground"
|
||||
open ? "unused-side-bar-svg-true" : "text-ring",
|
||||
"unused-side-bar-svg"
|
||||
)}
|
||||
viewBox="0 0 20 20"
|
||||
aria-hidden="true"
|
||||
|
|
@ -90,9 +90,9 @@ export default function ExtraSidebar() {
|
|||
to={subItem.href}
|
||||
className={classNames(
|
||||
subItem.href.split("/")[3] === current[5]
|
||||
? "bg-muted text-foreground"
|
||||
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
"group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
|
||||
? "unused-side-bar-link-colors-true"
|
||||
: "unused-side-bar-link-colors-false",
|
||||
"unused-side-bar-disclosure-panel"
|
||||
)}
|
||||
>
|
||||
{subItem.name}
|
||||
|
|
|
|||
|
|
@ -28,24 +28,24 @@ export const CardComponent = ({
|
|||
return (
|
||||
<Card className="group">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex w-full items-center gap-4">
|
||||
<CardTitle className="card-component-title-display">
|
||||
<span
|
||||
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]
|
||||
}
|
||||
></span>
|
||||
<span className="inline-block w-full flex-1 break-words truncate-doubleline">
|
||||
<span className="card-component-title-size">
|
||||
{flow.name}
|
||||
</span>
|
||||
{onDelete && (
|
||||
<button className="flex self-start" onClick={onDelete}>
|
||||
<Trash2 className="h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100" />
|
||||
<button className="card-component-delete-button" onClick={onDelete}>
|
||||
<Trash2 className="card-component-delete-icon" />
|
||||
</button>
|
||||
)}
|
||||
</CardTitle>
|
||||
<CardDescription className="pb-2 pt-2">
|
||||
<div className="truncate-doubleline">
|
||||
<CardDescription className="card-component-desc">
|
||||
<div className="card-component-desc-text">
|
||||
{flow.description}
|
||||
{/* {flow.description} */}
|
||||
</div>
|
||||
|
|
@ -53,8 +53,8 @@ export const CardComponent = ({
|
|||
</CardHeader>
|
||||
|
||||
<CardFooter>
|
||||
<div className="flex w-full items-end justify-between gap-2">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="card-component-footer-arrangement">
|
||||
<div className="card-component-footer">
|
||||
{/* <Badge variant="secondary">Agent</Badge>
|
||||
<Badge variant="secondary">
|
||||
<div className="w-3">
|
||||
|
|
|
|||
|
|
@ -354,7 +354,7 @@ The cursor: default; property value restores the browser's default cursor style
|
|||
|
||||
.alert-icon {
|
||||
@apply h-5 w-5
|
||||
} /*error-build-message-circle*/
|
||||
}
|
||||
.alert-font-size {
|
||||
@apply text-sm font-medium
|
||||
}
|
||||
|
|
@ -387,4 +387,78 @@ The cursor: default; property value restores the browser's default cursor style
|
|||
.success-alert-message {
|
||||
@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
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue