started work on availability-color-selector

This commit is contained in:
z1glr
2025-01-17 21:58:17 +00:00
parent a3c6fd685d
commit e37310b774
22 changed files with 9961 additions and 9155 deletions

4106
client/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -11,9 +11,9 @@
"dependencies": {
"@carbon/icons-react": "^11.53.0",
"@internationalized/date": "^3.6.0",
"@nextui-org/react": "^2.6.11",
"@nextui-org/system": "^2.4.6",
"@nextui-org/theme": "^2.4.5",
"@heroui/react": "2.6.13",
"@heroui/system": "2.4.6",
"@heroui/theme": "2.4.5",
"@react-aria/i18n": "^3.12.4",
"@react-stately/data": "^3.12.0",
"framer-motion": "^11.15.0",

View File

@@ -3,7 +3,7 @@
import { usePathname } from "next/navigation";
import React from "react";
import { SiteLink } from "./layout";
import { Divider, Link } from "@nextui-org/react";
import { Divider, Link } from "@heroui/react";
export default function Footer({ sites }: { sites: SiteLink[] }) {
const pathname = usePathname();

View File

@@ -18,7 +18,7 @@ import {
NavbarMenuToggle,
Tab,
Tabs,
} from "@nextui-org/react";
} from "@heroui/react";
import zustand from "@/Zustand";
import { SiteLink } from "./layout";
import React, { useEffect, useState } from "react";

View File

@@ -2,7 +2,7 @@
import { apiCall } from "@/lib";
import zustand from "@/Zustand";
import { Spinner } from "@nextui-org/react";
import { Spinner } from "@heroui/react";
import { usePathname, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";

View File

@@ -3,7 +3,7 @@
import { Add } from "@carbon/icons-react";
import { useState } from "react";
import AddEvent from "../components/Event/AddEvent";
import { Button } from "@nextui-org/react";
import { Button } from "@heroui/react";
export default function EventVolunteer() {
const [showAddItemDialogue, setShowAddItemDialogue] = useState(false);

View File

@@ -9,7 +9,7 @@ import {
CardHeader,
Form,
Input,
} from "@nextui-org/react";
} from "@heroui/react";
import { FormEvent, useState } from "react";
export default function Account() {

View File

@@ -9,7 +9,7 @@ import {
ModalContent,
ModalFooter,
ModalHeader,
} from "@nextui-org/react";
} from "@heroui/react";
import { FormEvent, useState } from "react";
export default function AddUser(props: {

View File

@@ -0,0 +1,9 @@
import ColorSelector from "@/components/Colorselector";
export default function Availabilities() {
return (
<div>
<ColorSelector />
</div>
);
}

View File

@@ -14,7 +14,7 @@ import {
ModalContent,
ModalFooter,
ModalHeader,
} from "@nextui-org/react";
} from "@heroui/react";
import { FormEvent, useEffect, useState } from "react";
export default function EditUser(props: {

View File

@@ -10,7 +10,7 @@ import {
TableHeader,
TableRow,
Tooltip,
} from "@nextui-org/react";
} from "@heroui/react";
import { useAsyncList } from "@react-stately/data";
import { FormEvent, useState } from "react";
import AddUser from "./AddUser";

View File

@@ -1,7 +1,8 @@
"use client";
import { Tab, Tabs } from "@nextui-org/react";
import { Tab, Tabs } from "@heroui/react";
import Users from "./Users";
import Availabilities from "./Availabilities";
export default function AdminDashboard() {
return (
@@ -11,7 +12,7 @@ export default function AdminDashboard() {
<Users />
</Tab>
<Tab title="Tasks">Tasks</Tab>
<Tab title="Availabilities">Availabilities</Tab>
<Tab title="Availabilities"><Availabilities /></Tab>
</Tabs>
</div>
);

View File

@@ -34,7 +34,7 @@ import {
TableHeader,
TableRow,
Tooltip,
} from "@nextui-org/react";
} from "@heroui/react";
import { useAsyncList } from "@react-stately/data";
import React, { Key, useState } from "react";

View File

@@ -5,7 +5,7 @@ import Event from "@/components/Event/Event";
import { apiCall } from "@/lib";
import zustand, { EventData } from "@/Zustand";
import { Add } from "@carbon/icons-react";
import { Button } from "@nextui-org/react";
import { Button } from "@heroui/react";
import { useEffect, useState } from "react";
export default function Events() {

View File

@@ -1,6 +1,6 @@
import type { Metadata } from "next";
import "./globals.css";
import { NextUIProvider } from "@nextui-org/system";
import { HeroUIProvider } from "@heroui/system";
import React from "react";
import Footer from "./Footer";
import Header from "./Header";
@@ -57,7 +57,7 @@ export default function RootLayout({
return (
<html>
<body className="bg-background text-foreground antialiased">
<NextUIProvider>
<HeroUIProvider>
<div className="flex min-h-screen flex-col p-4">
<header>
<Header sites={headerSites} />
@@ -69,7 +69,7 @@ export default function RootLayout({
<Footer sites={footerSites} />
</footer>
</div>
</NextUIProvider>
</HeroUIProvider>
</body>
</html>
);

View File

@@ -8,7 +8,7 @@ import {
ViewOffFilled,
WarningHexFilled,
} from "@carbon/icons-react";
import { Alert, Button, Form, Input } from "@nextui-org/react";
import { Alert, Button, Form, Input } from "@heroui/react";
import { useRouter } from "next/navigation";
import { FormEvent, useState } from "react";

View File

@@ -1,4 +1,4 @@
import { SwitchProps, useSwitch, VisuallyHidden } from "@nextui-org/react";
import { SwitchProps, useSwitch, VisuallyHidden } from "@heroui/react";
import React from "react";
export default function CheckboxIcon(props: SwitchProps) {

View File

@@ -0,0 +1,58 @@
import {
RadioGroup,
RadioProps,
useRadio,
VisuallyHidden,
} from "@heroui/react";
export default function ColorSelector() {
const colors = [
{ value: "Red", tailwind: "red-600" },
{ value: "Orange", tailwind: "orange-600" },
{ value: "Amber", tailwind: "amber-600" },
{ value: "Yellow", tailwind: "yellow-600" },
{ value: "Lime", tailwind: "lime-600" },
{ value: "Green", tailwind: "green-600" },
{ value: "Emerald", tailwind: "emerald-600" },
{ value: "Teal", tailwind: "teal-600" },
{ value: "Cyan", tailwind: "cyan-600" },
{ value: "Sky", tailwind: "sky-600" },
{ value: "Blue", tailwind: "blue-600" },
{ value: "Indigo", tailwind: "indigo-600" },
{ value: "Violet", tailwind: "violet-600" },
{ value: "Purple", tailwind: "purple-600" },
{ value: "Fuchsia", tailwind: "fuchsia-600" },
{ value: "Pink", tailwind: "pink-600" },
];
return (
<RadioGroup classNames={{ wrapper: "grid grid-cols-4" }}>
{colors.map((color) => (
<ColorRadio
description={color.value}
value={color.value}
key={color.value}
radioColor={`bg-${color.tailwind}`}
>
<div>{color.value}</div>
</ColorRadio>
))}
</RadioGroup>
);
}
function ColorRadio(props: { radioColor: string } & RadioProps) {
const { Component, children, getBaseProps, getInputProps } = useRadio(props);
return (
<Component
{...getBaseProps()}
className={`aspect-square cursor-pointer rounded-lg border-2 border-default tap-highlight-transparent hover:opacity-70 active:opacity-50 data-[selected=true]:border-primary ${props.radioColor} flex items-center justify-center p-1`}
>
<VisuallyHidden>
<input {...getInputProps()} />
</VisuallyHidden>
{children}
</Component>
);
}

View File

@@ -1,4 +1,4 @@
import { Button } from "@nextui-org/react";
import { Button } from "@heroui/react";
import EditEvent, { EventSubmitData } from "./EditEvent";
import { apiCall } from "@/lib";
import { AddLarge } from "@carbon/icons-react";

View File

@@ -18,7 +18,7 @@ import {
ModalHeader,
Spinner,
Textarea,
} from "@nextui-org/react";
} from "@heroui/react";
import { getTasks, Task } from "@/lib";
import { EventData } from "@/Zustand";

View File

@@ -2,7 +2,7 @@
import LocalDate from "../LocalDate";
import { EventData } from "@/Zustand";
import { Card, CardBody, CardHeader, Divider } from "@nextui-org/react";
import { Card, CardBody, CardHeader, Divider } from "@heroui/react";
import React from "react";
export default function Event({

View File

@@ -1,5 +1,5 @@
import type { Config } from "tailwindcss";
import { nextui } from "@nextui-org/theme";
import { heroui } from "@heroui/theme";
const HIGHLIGHT = "hsl(359,100%,65.7%)"; // #ff5053
const FOREGROUND = "hsl(295,100%,97.5%)"; // #fef2ff
@@ -15,7 +15,7 @@ export default {
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
@@ -54,9 +54,15 @@ export default {
numbers: ["space-mono"],
},
},
safelist: [
{
pattern:
/(text|bg)-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-600/,
},
],
darkMode: "class",
plugins: [
nextui({
heroui({
defaultTheme: "dark",
defaultExtendTheme: "dark",
themes: {