Added build-remix script 🤣 feature/random-nik-things

Browse Source
This commit is contained in:
Nikolaj Frey 2024-07-21 12:19:02 +08:00
parent 3db274f260
commit e9df675c48
3 changed files with 48 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -6,9 +6,9 @@
"scripts": { "scripts": {
"app": "npm run remix", "app": "npm run remix",
"remix": "npm run dev --prefix remix", "remix": "npm run dev --prefix remix",
"build-remix": "npm run build --prefix remix",
"next": "npm run dev --prefix next", "next": "npm run dev --prefix next",
"api": "npm run dev --prefix api", "api": "npm run dev --prefix api",
"build": "npm run build --prefix next",
"postinstall": "pnpm i --prefix next ; pnpm i --prefix=api" "postinstall": "pnpm i --prefix next ; pnpm i --prefix=api"
}, },
"repository": { "repository": {

10
remix/app/components/Branding/Branding.tsx
View File

@ -1,12 +1,12 @@
import { Box, Heading } from '@chakra-ui/react'; import { Box, Center, Flex, Heading } from '@chakra-ui/react';
import { Logo } from './Logo'; import { Logo } from './Logo';
export const Branding = () => { export const Branding = () => {
return ( return (
<Box w="100%" px={'18px'} maxW={'container'} textAlign={'left'}> <Flex pt={[25, 50]} flexDir="column" w="100%" minH="100vh" px={'18px'} maxW={'container'} textAlign={'left'}>
<Heading>Branding</Heading> <Heading>Branding</Heading>
ello <Heading mt={12}>Logo</Heading>
<Logo /> <Logo editable width="300" />
</Box> </Flex>
); );
}; };

71
remix/app/components/Branding/Logo.tsx
View File

@ -16,7 +16,9 @@ export const Logo = (props) => {
const [squares, setSquares] = useState(9); const [squares, setSquares] = useState(9);
const [width, setWidth] = useState(props?.width || 300); const initialWidth = props?.width || 300;
const [width, setWidth] = useState(initialWidth);
// logo is a T/plus shape made of two intersecting squares // logo is a T/plus shape made of two intersecting squares
// you can toggle border sides on both squares to create different shapes // you can toggle border sides on both squares to create different shapes
@ -48,11 +50,11 @@ export const Logo = (props) => {
padding: `${padding}px` padding: `${padding}px`
}; };
const innerBox = <Box borderRadius={`${borderRadius}px`} background="hotpink" w="100%" h="100%"></Box>; const InnerBox = (props: any = {}) => <Box borderRadius={`${borderRadius}px`} background="hotpink" w="100%" h="100%" {...props}></Box>;
const Square = (props: any = {}) => ( const Square = (props: any = {}) => (
<Box {...boxStyles} {...props} display="inline-block" w={boxWidth} h={boxWidth}> <Box {...boxStyles} display="inline-block" w={boxWidth} h={boxWidth}>
{innerBox} <InnerBox {...props}></InnerBox>
</Box> </Box>
); );
@ -60,34 +62,45 @@ export const Logo = (props) => {
<> <>
{/* these are the controls */} {/* these are the controls */}
{/* border radius use chakra slider */} {/* border radius use chakra slider */}
<Flex py={12} flexDir={'column'}> {props?.editable && (
<Heading my={4} as="h2" size="md"> <Flex pb={12} flexDir={'column'}>
Logo Controls <Heading my={4} as="h2" size="md">
</Heading> Logo Controls
<Heading my={4} as="h3" size="sm"> </Heading>
Border Radius <Heading my={4} as="h3" size="sm">
</Heading> Width {width}px
<Slider aria-label="slider-ex-1" defaultValue={borderRadius} min={0} max={width} onChange={setBorderRadius}> </Heading>
<SliderTrack> <Slider aria-label="slider-ex-1" defaultValue={width} min={0} max={initialWidth * 10} onChange={setWidth}>
<SliderFilledTrack /> <SliderTrack>
</SliderTrack> <SliderFilledTrack />
<SliderThumb>🟡</SliderThumb> </SliderTrack>
</Slider> <SliderThumb>🟡</SliderThumb>
<Heading my={4} as="h3" size="sm"> </Slider>
Padding <Heading my={4} as="h3" size="sm">
</Heading> Border Radius {borderRadius}px
<Slider aria-label="slider-ex-1" defaultValue={padding} min={0} max={width} onChange={setPadding}> </Heading>
<SliderTrack> <Slider aria-label="slider-ex-1" defaultValue={borderRadius} min={0} max={width} onChange={setBorderRadius}>
<SliderFilledTrack /> <SliderTrack>
</SliderTrack> <SliderFilledTrack />
<SliderThumb>🟡</SliderThumb> </SliderTrack>
</Slider> <SliderThumb>🟡</SliderThumb>
</Flex> </Slider>
<Heading my={4} as="h3" size="sm">
Padding {padding}px
</Heading>
<Slider aria-label="slider-ex-1" defaultValue={padding} min={0} max={width} onChange={setPadding}>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb>🟡</SliderThumb>
</Slider>
</Flex>
)}
<Box className="tt.logo" fontSize={0} overflow="hidden" w={width + 'px'} h={width + 'px'} position="relative"> <Box className="tt.logo" fontSize={0} overflow="hidden" w={width + 'px'} h={width + 'px'} position="relative">
{squaresArray.map((_, index) => { {squaresArray.map((_, index) => {
const odd = index % 2 === 0; const odd = index % 2 === 0;
const even = !odd;
<Square key={uuid + 'tt.logo' + index} bg={odd ? 'hotpink' : 'transparent'} />; return <Square key={uuid + 'tt.logo' + index} bg={even ? 'hotpink' : 'transparent'} />;
})} })}
</Box> </Box>
</> </>