Starting migration to shadUI
This commit is contained in:
Cristhian Zanforlin Lousa
parent
c33d7b9482
commit
56ca610a79
7 changed files with 3730 additions and 162 deletions
3307
package-lock.json
generated
3307
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +1,14 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"add": "^2.0.6",
|
||||
"class-variance-authority": "^0.6.0",
|
||||
"clsx": "^1.2.1",
|
||||
"lucide-react": "^0.233.0",
|
||||
"shadcn-ui": "^0.1.3",
|
||||
"switch": "^0.0.0",
|
||||
"table": "^6.8.1",
|
||||
"tailwind-merge": "^1.13.0",
|
||||
"tailwindcss-animate": "^1.0.5",
|
||||
"vite-plugin-svgr": "^3.2.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
113
src/frontend/src/components/ui/table.tsx
Normal file
113
src/frontend/src/components/ui/table.tsx
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import * as React from "react"
|
||||
import { cn } from "./lib/utils"
|
||||
|
||||
const Table = React.forwardRef<
|
||||
HTMLTableElement,
|
||||
React.HTMLAttributes<HTMLTableElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="w-full overflow-auto">
|
||||
<table
|
||||
ref={ref}
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
Table.displayName = "Table"
|
||||
|
||||
const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||
))
|
||||
TableHeader.displayName = "TableHeader"
|
||||
|
||||
const TableBody = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tbody
|
||||
ref={ref}
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableBody.displayName = "TableBody"
|
||||
|
||||
const TableFooter = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tfoot
|
||||
ref={ref}
|
||||
className={cn("bg-primary font-medium text-primary-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableFooter.displayName = "TableFooter"
|
||||
|
||||
const TableRow = React.forwardRef<
|
||||
HTMLTableRowElement,
|
||||
React.HTMLAttributes<HTMLTableRowElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableRow.displayName = "TableRow"
|
||||
|
||||
const TableHead = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.ThHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableHead.displayName = "TableHead"
|
||||
|
||||
const TableCell = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.TdHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableCell.displayName = "TableCell"
|
||||
|
||||
const TableCaption = React.forwardRef<
|
||||
HTMLTableCaptionElement,
|
||||
React.HTMLAttributes<HTMLTableCaptionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<caption
|
||||
ref={ref}
|
||||
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableCaption.displayName = "TableCaption"
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
|
|
@ -2,6 +2,84 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 100% 50%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: 215 20.2% 65.1%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 224 71% 4%;
|
||||
--foreground: 213 31% 91%;
|
||||
|
||||
--muted: 223 47% 11%;
|
||||
--muted-foreground: 215.4 16.3% 56.9%;
|
||||
|
||||
--popover: 224 71% 4%;
|
||||
--popover-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--card: 224 71% 4%;
|
||||
--card-foreground: 213 31% 91%;
|
||||
|
||||
--border: 216 34% 17%;
|
||||
--input: 216 34% 17%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 1.2%;
|
||||
|
||||
--secondary: 222.2 47.4% 11.2%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--accent: 216 34% 17%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 63% 31%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: 216 34% 17%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
|
|
@ -15,3 +93,9 @@ code {
|
|||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
}
|
||||
|
||||
/* The style below sets the cursor property of the element with the class .react-flow__pane to the default cursor.
|
||||
The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
|
||||
.react-flow__pane {
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { Dialog, Switch, Transition } from "@headlessui/react";
|
||||
import {
|
||||
ChevronDoubleLeftIcon,
|
||||
ChevronDoubleRightIcon,
|
||||
|
|
@ -11,22 +11,63 @@ import { NodeDataType } from "../../types/flow";
|
|||
import {
|
||||
classNames,
|
||||
limitScrollFieldsModal,
|
||||
nodeColors,
|
||||
nodeIcons,
|
||||
toNormalCase,
|
||||
toTitleCase,
|
||||
} from "../../utils";
|
||||
import { typesContext } from "../../contexts/typesContext";
|
||||
import { useUpdateNodeInternals } from "reactflow";
|
||||
const people = [
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "../../components/ui/table"
|
||||
|
||||
const invoices = [
|
||||
{
|
||||
name: "Lindsay Walton",
|
||||
title: "Front-end Developer",
|
||||
email: "lindsay.walton@example.com",
|
||||
role: "Member",
|
||||
invoice: "INV001",
|
||||
paymentStatus: "Paid",
|
||||
totalAmount: "$250.00",
|
||||
paymentMethod: "Credit Card",
|
||||
},
|
||||
// More people...
|
||||
];
|
||||
{
|
||||
invoice: "INV002",
|
||||
paymentStatus: "Pending",
|
||||
totalAmount: "$150.00",
|
||||
paymentMethod: "PayPal",
|
||||
},
|
||||
{
|
||||
invoice: "INV003",
|
||||
paymentStatus: "Unpaid",
|
||||
totalAmount: "$350.00",
|
||||
paymentMethod: "Bank Transfer",
|
||||
},
|
||||
{
|
||||
invoice: "INV004",
|
||||
paymentStatus: "Paid",
|
||||
totalAmount: "$450.00",
|
||||
paymentMethod: "Credit Card",
|
||||
},
|
||||
{
|
||||
invoice: "INV005",
|
||||
paymentStatus: "Paid",
|
||||
totalAmount: "$550.00",
|
||||
paymentMethod: "PayPal",
|
||||
},
|
||||
{
|
||||
invoice: "INV006",
|
||||
paymentStatus: "Pending",
|
||||
totalAmount: "$200.00",
|
||||
paymentMethod: "Bank Transfer",
|
||||
},
|
||||
{
|
||||
invoice: "INV007",
|
||||
paymentStatus: "Unpaid",
|
||||
totalAmount: "$300.00",
|
||||
paymentMethod: "Credit Card",
|
||||
},
|
||||
]
|
||||
|
||||
export default function EditNodeModal({ data }: { data: NodeDataType }) {
|
||||
const [open, setOpen] = useState(true);
|
||||
|
|
@ -43,6 +84,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
|
|||
}
|
||||
const [advanced, setAdvanced] = useState([]);
|
||||
const [parameters, setParameters] = useState([]);
|
||||
const [enabled, setEnabled] = useState(false)
|
||||
|
||||
const updateAdvancedParameters = () => {
|
||||
setAdvanced(
|
||||
Object.keys(data.node.template).filter(
|
||||
|
|
@ -69,9 +112,13 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
|
|||
)
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
updateAdvancedParameters();
|
||||
}, [data.node.template]);
|
||||
|
||||
console.log("DATA", data.node.template);
|
||||
|
||||
const Icon = nodeIcons[types[data.type]];
|
||||
return (
|
||||
<Transition.Root show={open} appear={true} as={Fragment}>
|
||||
|
|
@ -156,142 +203,88 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
|
|||
)}
|
||||
>
|
||||
<div className="flex flex-col h-full gap-5 h-fit ">
|
||||
<table className="table-fixed w-full divide-y divide-gray-300 border-b-[1px] rounded-b-lg h-full">
|
||||
<thead>
|
||||
<tr className="divide-x divide-gray-200">
|
||||
<th
|
||||
scope="col"
|
||||
className="py-3.5 px-4 text-center text-sm font-semibold text-gray-900"
|
||||
>
|
||||
Parameters
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-4 py-3.5 text-center text-sm font-semibold text-gray-900"
|
||||
>
|
||||
Advanced
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 bg-white align-top">
|
||||
{advanced.length > parameters.length
|
||||
? advanced.map((t, idx) => (
|
||||
<tr
|
||||
key={idx}
|
||||
className="divide-x divide-gray-200"
|
||||
>
|
||||
<td className="gap-3 py-4 px-4 text-sm font-medium text-gray-900 truncate h-1">
|
||||
{data.node.template[parameters[idx]] ? (
|
||||
<button
|
||||
className="flex gap-3 w-full items-center"
|
||||
onClick={() => {
|
||||
data.node.template[
|
||||
parameters[idx]
|
||||
].advanced = true;
|
||||
updateAdvancedParameters();
|
||||
}}
|
||||
>
|
||||
{data.node.template[parameters[idx]]
|
||||
.display_name
|
||||
? data.node.template[
|
||||
parameters[idx]
|
||||
].display_name
|
||||
: data.node.template[
|
||||
parameters[idx]
|
||||
].name
|
||||
? toTitleCase(
|
||||
data.node.template[
|
||||
parameters[idx]
|
||||
].name
|
||||
)
|
||||
: toTitleCase(t)}
|
||||
<ChevronDoubleRightIcon className="h-5 w-5 text-gray-900" />
|
||||
</button>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-4 text-sm text-right font-medium text-gray-900 truncate h-1">
|
||||
<button
|
||||
className="w-full flex justify-end gap-3 items-center"
|
||||
onClick={() => {
|
||||
data.node.template[t].advanced =
|
||||
false;
|
||||
updateAdvancedParameters();
|
||||
}}
|
||||
>
|
||||
<ChevronDoubleLeftIcon className="h-5 w-5 text-gray-900" />
|
||||
{data.node.template[t].display_name
|
||||
? data.node.template[t].display_name
|
||||
: data.node.template[t].name
|
||||
? toTitleCase(
|
||||
data.node.template[t].name
|
||||
)
|
||||
: toTitleCase(t)}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
: parameters.map((t, idx) => (
|
||||
<tr
|
||||
key={idx}
|
||||
className="divide-x divide-gray-200"
|
||||
>
|
||||
<td className="gap-3 py-4 px-4 text-sm font-medium text-gray-900">
|
||||
<button
|
||||
className="
|
||||
flex gap-3 w-full items-center"
|
||||
onClick={() => {
|
||||
data.node.template[t].advanced =
|
||||
true;
|
||||
updateAdvancedParameters();
|
||||
}}
|
||||
>
|
||||
{data.node.template[t].display_name
|
||||
? data.node.template[t].display_name
|
||||
: data.node.template[t].name
|
||||
? toTitleCase(
|
||||
data.node.template[t].name
|
||||
)
|
||||
: toTitleCase(t)}
|
||||
<ChevronDoubleRightIcon className="h-5 w-5 text-gray-900" />
|
||||
</button>
|
||||
</td>
|
||||
<td className="p-4 text-sm text-right font-medium text-gray-900">
|
||||
{data.node.template[advanced[idx]] ? (
|
||||
<button
|
||||
className="w-full flex justify-end gap-3 items-center"
|
||||
onClick={() => {
|
||||
data.node.template[
|
||||
advanced[idx]
|
||||
].advanced = false;
|
||||
updateAdvancedParameters();
|
||||
}}
|
||||
>
|
||||
<ChevronDoubleLeftIcon className="h-5 w-5 text-gray-900" />
|
||||
{data.node.template[advanced[idx]]
|
||||
.display_name
|
||||
? data.node.template[
|
||||
advanced[idx]
|
||||
].display_name
|
||||
: data.node.template[
|
||||
advanced[idx]
|
||||
].name
|
||||
? toTitleCase(
|
||||
data.node.template[
|
||||
advanced[idx]
|
||||
].name
|
||||
)
|
||||
: toTitleCase(t)}
|
||||
</button>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<Table>
|
||||
<TableCaption>A list of your recent invoices.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[100px]">Invoice</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Method</TableHead>
|
||||
<TableHead className="text-right">Amount</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{invoices.map((invoice) => (
|
||||
<TableRow key={invoice.invoice}>
|
||||
<TableCell className="font-medium">{invoice.invoice}</TableCell>
|
||||
<TableCell>{invoice.paymentStatus}</TableCell>
|
||||
<TableCell>{invoice.paymentMethod}</TableCell>
|
||||
<TableCell className="text-right">{invoice.totalAmount}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
|
||||
<table className="min-w-full divide-y divide-gray-300">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" className="py-1 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
|
||||
Param
|
||||
</th>
|
||||
<th scope="col" className="px-3 py-1 text-left text-sm font-semibold text-gray-900">
|
||||
Value
|
||||
</th>
|
||||
<th scope="col" className="px-3 py-1 text-left text-sm font-semibold text-gray-900">
|
||||
Show
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 bg-white">
|
||||
|
||||
{
|
||||
Object.keys(data.node.template).filter(
|
||||
(t) =>
|
||||
t.charAt(0) !== "_"
|
||||
).map((n, i) => (
|
||||
<tr key={i}>
|
||||
<td className="whitespace-nowrap py-1 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
||||
{data.node.template[n].name ? data.node.template[n].name : data.node.template[n].display_name }
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-3 py-1 text-sm text-gray-500">{data.node.template[n].value ? data.node.template[n].value : '-'}</td>
|
||||
<td className="whitespace-nowrap px-3 py-1 text-sm text-gray-500">
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={setEnabled}
|
||||
className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
|
||||
>
|
||||
<span className="sr-only">Use setting</span>
|
||||
<span aria-hidden="true" className="pointer-events-none absolute h-full w-full rounded-md bg-white" />
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={classNames(
|
||||
enabled ? 'bg-indigo-600' : 'bg-gray-200',
|
||||
'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out'
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={classNames(
|
||||
enabled ? 'translate-x-5' : 'translate-x-0',
|
||||
'pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out'
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,83 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
const { fontFamily } = require("tailwindcss/defaultTheme")
|
||||
|
||||
import plugin from "tailwindcss/plugin";
|
||||
module.exports = {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,tsx,jsx}"],
|
||||
darkMode: "class",
|
||||
important: true,
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: `var(--radius)`,
|
||||
md: `calc(var(--radius) - 2px)`,
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["var(--font-sans)", ...fontFamily.sans],
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: 0 },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: 0 },
|
||||
},
|
||||
pulseGreen: {
|
||||
"0%": { boxShadow: "0 0 0 0 rgba(72, 187, 120, 0.7)" },
|
||||
"100%": { boxShadow: "0 0 0 10px rgba(72, 187, 120, 0)" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
"pulse-green": "pulseGreen 1s linear",
|
||||
'spin-once': 'spin 1s linear 0.7'
|
||||
},
|
||||
borderColor: {
|
||||
"red-outline": "rgba(255, 0, 0, 0.8)",
|
||||
"green-outline": "rgba(72, 187, 120, 0.7)",
|
||||
|
|
@ -14,17 +86,6 @@ module.exports = {
|
|||
"red-outline": "0 0 5px rgba(255, 0, 0, 0.5)",
|
||||
"green-outline": "0 0 5px rgba(72, 187, 120, 0.7)",
|
||||
},
|
||||
|
||||
animation: {
|
||||
"pulse-green": "pulseGreen 1s linear",
|
||||
'spin-once': 'spin 1s linear 0.7'
|
||||
},
|
||||
keyframes: {
|
||||
pulseGreen: {
|
||||
"0%": { boxShadow: "0 0 0 0 rgba(72, 187, 120, 0.7)" },
|
||||
"100%": { boxShadow: "0 0 0 10px rgba(72, 187, 120, 0)" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
|
|
@ -87,6 +148,7 @@ module.exports = {
|
|||
},
|
||||
".dark .theme-attribution .react-flow__attribution": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.2)",
|
||||
padding: "0px 5px",
|
||||
},
|
||||
".dark .theme-attribution .react-flow__attribution a": {
|
||||
color: "black",
|
||||
|
|
@ -95,4 +157,4 @@ module.exports = {
|
|||
}),
|
||||
require("@tailwindcss/typography"),
|
||||
],
|
||||
};
|
||||
};
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
},
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue