From 01c7f47250daf45c06bd8ea115abedb22eddd35c Mon Sep 17 00:00:00 2001 From: Sara Date: Thu, 14 Dec 2023 19:27:16 +0100 Subject: [PATCH] try chakra-ui --- www/app/[domain]/chakra-showcase/page.tsx | 122 ++ www/app/[domain]/layout.tsx | 137 +- www/app/providers.tsx | 7 + www/app/supportedLanguages.ts | 4 + www/middleware.ts | 6 +- www/package.json | 9 + www/yarn.lock | 1449 ++++++++++++++++++++- 7 files changed, 1660 insertions(+), 74 deletions(-) create mode 100644 www/app/[domain]/chakra-showcase/page.tsx create mode 100644 www/app/providers.tsx diff --git a/www/app/[domain]/chakra-showcase/page.tsx b/www/app/[domain]/chakra-showcase/page.tsx new file mode 100644 index 00000000..45e3d68c --- /dev/null +++ b/www/app/[domain]/chakra-showcase/page.tsx @@ -0,0 +1,122 @@ +"use client"; +import { + Grid, + Box, + Kbd, + Heading, + Text, + Button, + Wrap, + WrapItem, + Spinner, + Menu, + MenuList, + MenuItem, + MenuButton, + Circle, +} from "@chakra-ui/react"; +import { PhoneIcon, ChevronDownIcon } from "@chakra-ui/icons"; +import { Select } from "chakra-react-select"; +import supportedLanguages from "../../supportedLanguages"; +import { useState } from "react"; + +export default () => { + const [language, setLanguage] = useState<{ label: string; value: string }>({ + label: "No translation", + value: "", + }); + const options = supportedLanguages.map((i) => ({ + label: i.name, + value: i.value || "", + })); + const handleLanguageChange = (option) => setLanguage(option); + + return ( + <> +
+ + + + Here are a few components + + + + + shift + H + + + + + + + + + + + + + + + + + + }> + Actions + + + Download + Create a Copy + Mark as Draft + Delete + Attend a Workshop + + + + + +