From 03d79879225d2f06921f7d3d2c2122c1fc6823e2 Mon Sep 17 00:00:00 2001 From: Krithik Rao Date: Sun, 10 Nov 2024 12:34:20 -0800 Subject: [PATCH] Add alert and according component --- frontend/package-lock.json | 77 ++++++-- frontend/package.json | 1 + frontend/src/components/ui/accordion.tsx | 55 ++++++ frontend/src/components/ui/alert.tsx | 59 ++++++ frontend/tailwind.config.js | 218 ++++++++++++----------- 5 files changed, 300 insertions(+), 110 deletions(-) create mode 100644 frontend/src/components/ui/accordion.tsx create mode 100644 frontend/src/components/ui/alert.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 96319cbe..b9cee16b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,6 +11,7 @@ "@codemirror/lang-javascript": "^6.2.2", "@formspree/react": "^2.5.1", "@hookform/resolvers": "^3.9.0", + "@radix-ui/react-accordion": "^1.2.1", "@radix-ui/react-alert-dialog": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", @@ -1470,15 +1471,16 @@ } }, "node_modules/@radix-ui/react-accordion": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.0.tgz", - "integrity": "sha512-HJOzSX8dQqtsp/3jVxCU3CXEONF7/2jlGAB28oX8TTw1Dz8JYbEI1UcL8355PuLBE41/IRRMvCw7VkiK/jcUOQ==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.1.tgz", + "integrity": "sha512-bg/l7l5QzUjgsh8kjwDFommzAshnUsuVMV5NM56QVCm+7ZckYdd9P/ExR8xG/Oup0OajVxNLaHJ1tb8mXk+nzQ==", + "license": "MIT", "dependencies": { "@radix-ui/primitive": "1.1.0", - "@radix-ui/react-collapsible": "1.1.0", + "@radix-ui/react-collapsible": "1.1.1", "@radix-ui/react-collection": "1.1.0", "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-primitive": "2.0.0", @@ -1499,6 +1501,21 @@ } } }, + "node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-context": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", + "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-alert-dialog": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.2.tgz", @@ -1640,15 +1657,16 @@ } }, "node_modules/@radix-ui/react-collapsible": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.0.tgz", - "integrity": "sha512-zQY7Epa8sTL0mq4ajSJpjgn2YmCgyrG7RsQgLp3C0LQVkG7+Tf6Pv1CeNWZLyqMjhdPkBa5Lx7wYBeSu7uCSTA==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.1.tgz", + "integrity": "sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==", + "license": "MIT", "dependencies": { "@radix-ui/primitive": "1.1.0", "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-context": "1.1.1", "@radix-ui/react-id": "1.1.0", - "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-presence": "1.1.1", "@radix-ui/react-primitive": "2.0.0", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0" @@ -1668,6 +1686,45 @@ } } }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-context": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", + "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-presence": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz", + "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "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-collection": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index a806f3f4..0cc5a560 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -26,6 +26,7 @@ "@codemirror/lang-javascript": "^6.2.2", "@formspree/react": "^2.5.1", "@hookform/resolvers": "^3.9.0", + "@radix-ui/react-accordion": "^1.2.1", "@radix-ui/react-alert-dialog": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", diff --git a/frontend/src/components/ui/accordion.tsx b/frontend/src/components/ui/accordion.tsx new file mode 100644 index 00000000..7e3f4ef8 --- /dev/null +++ b/frontend/src/components/ui/accordion.tsx @@ -0,0 +1,55 @@ +import * as React from "react"; + +import { cn } from "@/lib/utils"; +import * as AccordionPrimitive from "@radix-ui/react-accordion"; +import { ChevronDownIcon } from "@radix-ui/react-icons"; + +const Accordion = AccordionPrimitive.Root; + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AccordionItem.displayName = "AccordionItem"; + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className, + )} + {...props} + > + {children} + + + +)); +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)); +AccordionContent.displayName = AccordionPrimitive.Content.displayName; + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/frontend/src/components/ui/alert.tsx b/frontend/src/components/ui/alert.tsx new file mode 100644 index 00000000..fbd92373 --- /dev/null +++ b/frontend/src/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react"; + +import { cn } from "@/lib/utils"; +import { type VariantProps, cva } from "class-variance-authority"; + +const alertVariants = cva( + "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)); +Alert.displayName = "Alert"; + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +AlertTitle.displayName = "AlertTitle"; + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +AlertDescription.displayName = "AlertDescription"; + +export { Alert, AlertTitle, AlertDescription }; diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index e2ee4d63..de33890c 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,106 +1,124 @@ /** @type {import('tailwindcss').Config} */ export default { - content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], + darkMode: ["class"], + content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { - fontFamily: { - sans: ["Inter", "sans-serif"], - orbitron: ["Orbitron", "sans-serif"], - mono: ["monospace"], - }, - extend: { - animation: { - meteor: "meteor 5s linear infinite", - }, - keyframes: { - meteor: { - "0%": { - transform: "rotate(215deg) translateX(0)", - opacity: "1", - }, - "70%": { - opacity: "1", - }, - "100%": { - transform: "rotate(215deg) translateX(-500px)", - opacity: "0", - }, - }, - }, - borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, - colors: { - // Using pure black and white for main colors - gray: { - 1: "#ffffff", // Pure white - 2: "#f9f9fb", - 3: "#eff0f3", - 4: "#e7e8ec", - 5: "#e0e1e6", - 6: "#d8d9e0", - 7: "#cdced7", - 8: "#b9bbc6", - 9: "#8b8d98", - 10: "#80828d", - 11: "#62636c", - 12: "#000000", // Pure black - }, - primary: { - 1: "#fefcfb", - 2: "#fff5f1", - 3: "#ffe8de", - 4: "#ffd7c7", - 5: "#ffc9b4", - 6: "#ffb89f", - 7: "#ffa284", - 8: "#fb8765", - 9: "#ffffff", // Pure white for primary highlight - 10: "#f14000", - 11: "#de3500", - 12: "#000000", // Pure black - DEFAULT: "#ff4f00", - foreground: "#000000", - }, - background: "#000000", // Pure black - foreground: "#ffffff", // Pure white - card: { - DEFAULT: "#000000", - foreground: "#ffffff", - }, - popover: { - DEFAULT: "#000000", - foreground: "#ffffff", - }, - secondary: { - DEFAULT: "#000000", - foreground: "#ffffff", - }, - muted: { - DEFAULT: "#000000", - foreground: "#ffffff", - }, - accent: { - DEFAULT: "#000000", - foreground: "#ffffff", - }, - destructive: { - DEFAULT: "#DD4425", - foreground: "#ffffff", - }, - border: "#ffffff", - input: "#000000", - ring: "#ffffff", - chart: { - 1: "rgb(59, 130, 246)", - 2: "rgb(16, 185, 129)", - 3: "rgb(251, 146, 60)", - 4: "rgb(147, 51, 234)", - 5: "rgb(236, 72, 153)", - }, - }, - }, + fontFamily: { + sans: ["Inter", "sans-serif"], + orbitron: ["Orbitron", "sans-serif"], + mono: ["monospace"] + }, + extend: { + animation: { + meteor: 'meteor 5s linear infinite', + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out' + }, + keyframes: { + meteor: { + '0%': { + transform: 'rotate(215deg) translateX(0)', + opacity: '1' + }, + '70%': { + opacity: '1' + }, + '100%': { + transform: 'rotate(215deg) translateX(-500px)', + opacity: '0' + } + }, + 'accordion-down': { + from: { + height: '0' + }, + to: { + height: 'var(--radix-accordion-content-height)' + } + }, + 'accordion-up': { + from: { + height: 'var(--radix-accordion-content-height)' + }, + to: { + height: '0' + } + } + }, + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)' + }, + colors: { + gray: { + '1': '#ffffff', + '2': '#f9f9fb', + '3': '#eff0f3', + '4': '#e7e8ec', + '5': '#e0e1e6', + '6': '#d8d9e0', + '7': '#cdced7', + '8': '#b9bbc6', + '9': '#8b8d98', + '10': '#80828d', + '11': '#62636c', + '12': '#000000' + }, + primary: { + '1': '#fefcfb', + '2': '#fff5f1', + '3': '#ffe8de', + '4': '#ffd7c7', + '5': '#ffc9b4', + '6': '#ffb89f', + '7': '#ffa284', + '8': '#fb8765', + '9': '#ffffff', + '10': '#f14000', + '11': '#de3500', + '12': '#000000', + DEFAULT: '#ff4f00', + foreground: '#000000' + }, + background: '#000000', + foreground: '#ffffff', + card: { + DEFAULT: '#000000', + foreground: '#ffffff' + }, + popover: { + DEFAULT: '#000000', + foreground: '#ffffff' + }, + secondary: { + DEFAULT: '#000000', + foreground: '#ffffff' + }, + muted: { + DEFAULT: '#000000', + foreground: '#ffffff' + }, + accent: { + DEFAULT: '#000000', + foreground: '#ffffff' + }, + destructive: { + DEFAULT: '#DD4425', + foreground: '#ffffff' + }, + border: '#ffffff', + input: '#000000', + ring: '#ffffff', + chart: { + '1': 'rgb(59, 130, 246)', + '2': 'rgb(16, 185, 129)', + '3': 'rgb(251, 146, 60)', + '4': 'rgb(147, 51, 234)', + '5': 'rgb(236, 72, 153)' + } + } + } }, plugins: [require("tailwindcss-animate")], base: {