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": {
"app": "npm run remix",
"remix": "npm run dev --prefix remix",
"build-remix": "npm run build --prefix remix",
"next": "npm run dev --prefix next",
"api": "npm run dev --prefix api",
"build": "npm run build --prefix next",
"postinstall": "pnpm i --prefix next ; pnpm i --prefix=api"
},
"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';
export const Branding = () => {
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>
ello
<Logo />
</Box>
<Heading mt={12}>Logo</Heading>
<Logo editable width="300" />
</Flex>
);
};

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

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