selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-21 04:39:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove chakra shawcase

Browse Source
This commit is contained in:
Sara
2024-01-02 18:47:36 +01:00
parent 89dc6ebb01
commit 0ce94e70ac
1 changed files with 0 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
www/app/[domain]/chakra-showcase/page.tsx
View File

@@ -1,122 +0,0 @@
"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 (
<>
<div></div>
<Grid
templateColumns={{
sm: "1fr",
md: "repeat(2, 1fr)",
lg: "repeat(2, 1fr)",
}}
templateRows={{ sm: "repeat(2, 1fr)", md: "1fr", lg: "1fr" }}
gap={{ base: "2", md: "4", lg: "4" }}
h="100%"
>
<Box
bg="Background"
h="100%"
rounded="5px"
p={{ base: "2", lg: "4" }}
overflowX="scroll"
>
<Heading as="h1" size="xl" noOfLines={1}>
Here are a few components
</Heading>
<Wrap spacing={4} p="4">
<WrapItem>
<span>
<Kbd>shift</Kbd> + <Kbd>H</Kbd>
</span>
</WrapItem>
<WrapItem>
<Circle size="40px" bg="tomato" color="white">
<PhoneIcon />
</Circle>
</WrapItem>
<WrapItem>
<Button colorScheme="blue">A button</Button>
</WrapItem>
<WrapItem>
<Spinner />
</WrapItem>
<WrapItem>
<Menu>
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
Actions
</MenuButton>
<MenuList>
<MenuItem>Download</MenuItem>
<MenuItem>Create a Copy</MenuItem>
<MenuItem>Mark as Draft</MenuItem>
<MenuItem>Delete</MenuItem>
<MenuItem>Attend a Workshop</MenuItem>
</MenuList>
</Menu>
</WrapItem>
</Wrap>
<WrapItem>
<Select
options={options}
onChange={handleLanguageChange}
value={language}
/>
</WrapItem>
</Box>
<Box
bg="Background"
h="100%"
rounded="5px"
p={{ base: "2", lg: "4" }}
overflowX="scroll"
>
<Text>
All legths can be either a number that maps to default values (eg
'2' will become '--var-chakra-space-2', which by default is .5rem),
a css string value like "25px" or an object with different values
for different screen sizes. See the docs on responsive-styles.
</Text>
<Text>
This is the default theme, but you can ovewrite part or all of it,
see the Customize Component styles section of the docs, especially
Customizing component styles
</Text>
<Text>I think the figma section of their docs is promising too</Text>
</Box>
</Grid>
</>
);
};