Added accordion
This commit is contained in:
Lucas Oliveira
parent
facbb76171
commit
5456ae396f
4 changed files with 280 additions and 129 deletions
58
frontend/components/ui/accordion.tsx
Normal file
58
frontend/components/ui/accordion.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
||||||
|
import { ChevronDown } from "lucide-react";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Accordion = AccordionPrimitive.Root;
|
||||||
|
|
||||||
|
const AccordionItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AccordionPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AccordionPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn("border rounded-md", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AccordionItem.displayName = "AccordionItem";
|
||||||
|
|
||||||
|
const AccordionTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AccordionPrimitive.Trigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<AccordionPrimitive.Header className="flex">
|
||||||
|
<AccordionPrimitive.Trigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex flex-1 items-center p-4 py-2.5 gap-2 font-medium !text-mmd text-muted-foreground transition-all [&[data-state=open]>svg]:rotate-180",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronDown className="h-3.5 w-3.5 shrink-0 transition-transform duration-200" />
|
||||||
|
{children}
|
||||||
|
</AccordionPrimitive.Trigger>
|
||||||
|
</AccordionPrimitive.Header>
|
||||||
|
));
|
||||||
|
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
||||||
|
|
||||||
|
const AccordionContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AccordionPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<AccordionPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className={cn("p-4 pt-2", className)}>{children}</div>
|
||||||
|
</AccordionPrimitive.Content>
|
||||||
|
));
|
||||||
|
|
||||||
|
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
||||||
56
frontend/package-lock.json
generated
56
frontend/package-lock.json
generated
|
|
@ -10,6 +10,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@microsoft/mgt-components": "^4.6.0",
|
"@microsoft/mgt-components": "^4.6.0",
|
||||||
"@microsoft/mgt-msal2-provider": "^4.6.0",
|
"@microsoft/mgt-msal2-provider": "^4.6.0",
|
||||||
|
"@radix-ui/react-accordion": "^1.2.12",
|
||||||
"@radix-ui/react-avatar": "^1.1.10",
|
"@radix-ui/react-avatar": "^1.1.10",
|
||||||
"@radix-ui/react-checkbox": "^1.3.2",
|
"@radix-ui/react-checkbox": "^1.3.2",
|
||||||
"@radix-ui/react-collapsible": "^1.1.11",
|
"@radix-ui/react-collapsible": "^1.1.11",
|
||||||
|
|
@ -19,6 +20,7 @@
|
||||||
"@radix-ui/react-navigation-menu": "^1.2.13",
|
"@radix-ui/react-navigation-menu": "^1.2.13",
|
||||||
"@radix-ui/react-popover": "^1.1.15",
|
"@radix-ui/react-popover": "^1.1.15",
|
||||||
"@radix-ui/react-select": "^2.2.5",
|
"@radix-ui/react-select": "^2.2.5",
|
||||||
|
"@radix-ui/react-separator": "^1.1.7",
|
||||||
"@radix-ui/react-slider": "^1.3.6",
|
"@radix-ui/react-slider": "^1.3.6",
|
||||||
"@radix-ui/react-slot": "^1.2.3",
|
"@radix-ui/react-slot": "^1.2.3",
|
||||||
"@radix-ui/react-switch": "^1.2.5",
|
"@radix-ui/react-switch": "^1.2.5",
|
||||||
|
|
@ -1215,6 +1217,37 @@
|
||||||
"integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
|
"integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-accordion": {
|
||||||
|
"version": "1.2.12",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
|
||||||
|
"integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/primitive": "1.1.3",
|
||||||
|
"@radix-ui/react-collapsible": "1.1.12",
|
||||||
|
"@radix-ui/react-collection": "1.1.7",
|
||||||
|
"@radix-ui/react-compose-refs": "1.1.2",
|
||||||
|
"@radix-ui/react-context": "1.1.2",
|
||||||
|
"@radix-ui/react-direction": "1.1.1",
|
||||||
|
"@radix-ui/react-id": "1.1.1",
|
||||||
|
"@radix-ui/react-primitive": "2.1.3",
|
||||||
|
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-arrow": {
|
"node_modules/@radix-ui/react-arrow": {
|
||||||
"version": "1.1.7",
|
"version": "1.1.7",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
|
||||||
|
|
@ -1859,6 +1892,29 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-separator": {
|
||||||
|
"version": "1.1.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
|
||||||
|
"integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-primitive": "2.1.3"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-slider": {
|
"node_modules/@radix-ui/react-slider": {
|
||||||
"version": "1.3.6",
|
"version": "1.3.6",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@microsoft/mgt-components": "^4.6.0",
|
"@microsoft/mgt-components": "^4.6.0",
|
||||||
"@microsoft/mgt-msal2-provider": "^4.6.0",
|
"@microsoft/mgt-msal2-provider": "^4.6.0",
|
||||||
|
"@radix-ui/react-accordion": "^1.2.12",
|
||||||
"@radix-ui/react-avatar": "^1.1.10",
|
"@radix-ui/react-avatar": "^1.1.10",
|
||||||
"@radix-ui/react-checkbox": "^1.3.2",
|
"@radix-ui/react-checkbox": "^1.3.2",
|
||||||
"@radix-ui/react-collapsible": "^1.1.11",
|
"@radix-ui/react-collapsible": "^1.1.11",
|
||||||
|
|
@ -20,6 +21,7 @@
|
||||||
"@radix-ui/react-navigation-menu": "^1.2.13",
|
"@radix-ui/react-navigation-menu": "^1.2.13",
|
||||||
"@radix-ui/react-popover": "^1.1.15",
|
"@radix-ui/react-popover": "^1.1.15",
|
||||||
"@radix-ui/react-select": "^2.2.5",
|
"@radix-ui/react-select": "^2.2.5",
|
||||||
|
"@radix-ui/react-separator": "^1.1.7",
|
||||||
"@radix-ui/react-slider": "^1.3.6",
|
"@radix-ui/react-slider": "^1.3.6",
|
||||||
"@radix-ui/react-slot": "^1.2.3",
|
"@radix-ui/react-slot": "^1.2.3",
|
||||||
"@radix-ui/react-switch": "^1.2.5",
|
"@radix-ui/react-switch": "^1.2.5",
|
||||||
|
|
|
||||||
|
|
@ -14,135 +14,170 @@ const config = {
|
||||||
"./src/**/*.{ts,tsx}",
|
"./src/**/*.{ts,tsx}",
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
container: {
|
container: {
|
||||||
center: true,
|
center: true,
|
||||||
screens: {
|
screens: {
|
||||||
"2xl": "1400px",
|
'2xl': '1400px',
|
||||||
"3xl": "1500px",
|
'3xl': '1500px'
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
screens: {
|
screens: {
|
||||||
xl: "1200px",
|
xl: '1200px',
|
||||||
"2xl": "1400px",
|
'2xl': '1400px',
|
||||||
"3xl": "1500px",
|
'3xl': '1500px'
|
||||||
},
|
},
|
||||||
keyframes: {
|
keyframes: {
|
||||||
overlayShow: {
|
overlayShow: {
|
||||||
from: { opacity: 0 },
|
from: {
|
||||||
to: { opacity: 1 },
|
opacity: 0
|
||||||
},
|
},
|
||||||
contentShow: {
|
to: {
|
||||||
from: {
|
opacity: 1
|
||||||
opacity: 0,
|
}
|
||||||
transform: "translate(-50%, -50%) scale(0.95)",
|
},
|
||||||
clipPath: "inset(50% 0)",
|
contentShow: {
|
||||||
},
|
from: {
|
||||||
to: {
|
opacity: 0,
|
||||||
opacity: 1,
|
transform: 'translate(-50%, -50%) scale(0.95)',
|
||||||
transform: "translate(-50%, -50%) scale(1)",
|
clipPath: 'inset(50% 0)'
|
||||||
clipPath: "inset(0% 0)",
|
},
|
||||||
},
|
to: {
|
||||||
},
|
opacity: 1,
|
||||||
wiggle: {
|
transform: 'translate(-50%, -50%) scale(1)',
|
||||||
"0%, 100%": { transform: "scale(100%)" },
|
clipPath: 'inset(0% 0)'
|
||||||
"50%": { transform: "scale(120%)" },
|
}
|
||||||
},
|
},
|
||||||
},
|
wiggle: {
|
||||||
animation: {
|
'0%, 100%': {
|
||||||
overlayShow: "overlayShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
|
transform: 'scale(100%)'
|
||||||
contentShow: "contentShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
|
},
|
||||||
wiggle: "wiggle 150ms ease-in-out 1",
|
'50%': {
|
||||||
},
|
transform: 'scale(120%)'
|
||||||
colors: {
|
}
|
||||||
border: "hsl(var(--border))",
|
},
|
||||||
input: "hsl(var(--input))",
|
'accordion-down': {
|
||||||
ring: "hsl(var(--ring))",
|
from: {
|
||||||
background: "hsl(var(--background))",
|
height: '0'
|
||||||
foreground: "hsl(var(--foreground))",
|
},
|
||||||
primary: {
|
to: {
|
||||||
DEFAULT: "hsl(var(--primary))",
|
height: 'var(--radix-accordion-content-height)'
|
||||||
foreground: "hsl(var(--primary-foreground))",
|
}
|
||||||
hover: "hsl(var(--primary-hover))",
|
},
|
||||||
},
|
'accordion-up': {
|
||||||
secondary: {
|
from: {
|
||||||
DEFAULT: "hsl(var(--secondary))",
|
height: 'var(--radix-accordion-content-height)'
|
||||||
foreground: "hsl(var(--secondary-foreground))",
|
},
|
||||||
hover: "hsl(var(--secondary-hover))",
|
to: {
|
||||||
},
|
height: '0'
|
||||||
destructive: {
|
}
|
||||||
DEFAULT: "hsl(var(--destructive))",
|
}
|
||||||
foreground: "hsl(var(--destructive-foreground))",
|
},
|
||||||
},
|
animation: {
|
||||||
muted: {
|
overlayShow: 'overlayShow 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||||
DEFAULT: "hsl(var(--muted))",
|
contentShow: 'contentShow 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||||
foreground: "hsl(var(--muted-foreground))",
|
wiggle: 'wiggle 150ms ease-in-out 1',
|
||||||
},
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||||
accent: {
|
'accordion-up': 'accordion-up 0.2s ease-out'
|
||||||
DEFAULT: "hsl(var(--accent))",
|
},
|
||||||
foreground: "hsl(var(--accent-foreground))",
|
colors: {
|
||||||
},
|
border: 'hsl(var(--border))',
|
||||||
"accent-emerald-foreground": {
|
input: 'hsl(var(--input))',
|
||||||
DEFAULT: "hsl(var(--accent-emerald-foreground))",
|
ring: 'hsl(var(--ring))',
|
||||||
},
|
background: 'hsl(var(--background))',
|
||||||
"accent-pink-foreground": {
|
foreground: 'hsl(var(--foreground))',
|
||||||
DEFAULT: "hsl(var(--accent-pink-foreground))",
|
primary: {
|
||||||
},
|
DEFAULT: 'hsl(var(--primary))',
|
||||||
popover: {
|
foreground: 'hsl(var(--primary-foreground))',
|
||||||
DEFAULT: "hsl(var(--popover))",
|
hover: 'hsl(var(--primary-hover))'
|
||||||
foreground: "hsl(var(--popover-foreground))",
|
},
|
||||||
},
|
secondary: {
|
||||||
card: {
|
DEFAULT: 'hsl(var(--secondary))',
|
||||||
DEFAULT: "hsl(var(--card))",
|
foreground: 'hsl(var(--secondary-foreground))',
|
||||||
foreground: "hsl(var(--card-foreground))",
|
hover: 'hsl(var(--secondary-hover))'
|
||||||
},
|
},
|
||||||
"status-blue": "var(--status-blue)",
|
destructive: {
|
||||||
"status-green": "var(--status-green)",
|
DEFAULT: 'hsl(var(--destructive))',
|
||||||
"status-red": "var(--status-red)",
|
foreground: 'hsl(var(--destructive-foreground))'
|
||||||
"status-yellow": "var(--status-yellow)",
|
},
|
||||||
"component-icon": "var(--component-icon)",
|
muted: {
|
||||||
"flow-icon": "var(--flow-icon)",
|
DEFAULT: 'hsl(var(--muted))',
|
||||||
"placeholder-foreground": "hsl(var(--placeholder-foreground))",
|
foreground: 'hsl(var(--muted-foreground))'
|
||||||
"datatype-blue": {
|
},
|
||||||
DEFAULT: "hsl(var(--datatype-blue))",
|
accent: {
|
||||||
foreground: "hsl(var(--datatype-blue-foreground))",
|
DEFAULT: 'hsl(var(--accent))',
|
||||||
},
|
foreground: 'hsl(var(--accent-foreground))'
|
||||||
"datatype-yellow": {
|
},
|
||||||
DEFAULT: "hsl(var(--datatype-yellow))",
|
'accent-emerald-foreground': {
|
||||||
foreground: "hsl(var(--datatype-yellow-foreground))",
|
DEFAULT: 'hsl(var(--accent-emerald-foreground))'
|
||||||
},
|
},
|
||||||
"datatype-red": {
|
'accent-pink-foreground': {
|
||||||
DEFAULT: "hsl(var(--datatype-red))",
|
DEFAULT: 'hsl(var(--accent-pink-foreground))'
|
||||||
foreground: "hsl(var(--datatype-red-foreground))",
|
},
|
||||||
},
|
popover: {
|
||||||
"datatype-emerald": {
|
DEFAULT: 'hsl(var(--popover))',
|
||||||
DEFAULT: "hsl(var(--datatype-emerald))",
|
foreground: 'hsl(var(--popover-foreground))'
|
||||||
foreground: "hsl(var(--datatype-emerald-foreground))",
|
},
|
||||||
},
|
card: {
|
||||||
"datatype-violet": {
|
DEFAULT: 'hsl(var(--card))',
|
||||||
DEFAULT: "hsl(var(--datatype-violet))",
|
foreground: 'hsl(var(--card-foreground))'
|
||||||
foreground: "hsl(var(--datatype-violet-foreground))",
|
},
|
||||||
},
|
'status-blue': 'var(--status-blue)',
|
||||||
warning: {
|
'status-green': 'var(--status-green)',
|
||||||
DEFAULT: "hsl(var(--warning))",
|
'status-red': 'var(--status-red)',
|
||||||
foreground: "hsl(var(--warning-foreground))",
|
'status-yellow': 'var(--status-yellow)',
|
||||||
},
|
'component-icon': 'var(--component-icon)',
|
||||||
},
|
'flow-icon': 'var(--flow-icon)',
|
||||||
borderRadius: {
|
'placeholder-foreground': 'hsl(var(--placeholder-foreground))',
|
||||||
lg: "var(--radius)",
|
'datatype-blue': {
|
||||||
md: "calc(var(--radius) - 2px)",
|
DEFAULT: 'hsl(var(--datatype-blue))',
|
||||||
sm: "calc(var(--radius) - 4px)",
|
foreground: 'hsl(var(--datatype-blue-foreground))'
|
||||||
},
|
},
|
||||||
fontFamily: {
|
'datatype-yellow': {
|
||||||
sans: ["var(--font-sans)", ...fontFamily.sans],
|
DEFAULT: 'hsl(var(--datatype-yellow))',
|
||||||
mono: ["var(--font-mono)", ...fontFamily.mono],
|
foreground: 'hsl(var(--datatype-yellow-foreground))'
|
||||||
chivo: ["var(--font-chivo)", ...fontFamily.sans],
|
},
|
||||||
},
|
'datatype-red': {
|
||||||
fontSize: {
|
DEFAULT: 'hsl(var(--datatype-red))',
|
||||||
xxs: "11px",
|
foreground: 'hsl(var(--datatype-red-foreground))'
|
||||||
mmd: "13px",
|
},
|
||||||
},
|
'datatype-emerald': {
|
||||||
},
|
DEFAULT: 'hsl(var(--datatype-emerald))',
|
||||||
|
foreground: 'hsl(var(--datatype-emerald-foreground))'
|
||||||
|
},
|
||||||
|
'datatype-violet': {
|
||||||
|
DEFAULT: 'hsl(var(--datatype-violet))',
|
||||||
|
foreground: 'hsl(var(--datatype-violet-foreground))'
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
DEFAULT: 'hsl(var(--warning))',
|
||||||
|
foreground: 'hsl(var(--warning-foreground))'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
lg: 'var(--radius)',
|
||||||
|
md: 'calc(var(--radius) - 2px)',
|
||||||
|
sm: 'calc(var(--radius) - 4px)'
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: [
|
||||||
|
'var(--font-sans)',
|
||||||
|
...fontFamily.sans
|
||||||
|
],
|
||||||
|
mono: [
|
||||||
|
'var(--font-mono)',
|
||||||
|
...fontFamily.mono
|
||||||
|
],
|
||||||
|
chivo: [
|
||||||
|
'var(--font-chivo)',
|
||||||
|
...fontFamily.sans
|
||||||
|
]
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
xxs: '11px',
|
||||||
|
mmd: '13px'
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
tailwindcssAnimate,
|
tailwindcssAnimate,
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue