feature/random-nik-things

Browse Source
This commit is contained in:
Nikolaj Frey 2024-07-21 10:51:00 +08:00
parent 990cd108bd
commit 3db274f260
3 changed files with 43 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
remix/app/Providers/Chakra/space.tsx
View File

@ -5,6 +5,7 @@ const end = 9999;
for (let i = start; i <= end; i++) { for (let i = start; i <= end; i++) {
spaceObj[i] = `${i * 0.25}rem`; spaceObj[i] = `${i * 0.25}rem`;
// spaceObj[i] = `${i}px`;
} }
spaceObj['container'] = '700px'; spaceObj['container'] = '700px';

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

@ -5,6 +5,7 @@ export const Branding = () => {
return ( return (
<Box w="100%" px={'18px'} maxW={'container'} textAlign={'left'}> <Box w="100%" px={'18px'} maxW={'container'} textAlign={'left'}>
<Heading>Branding</Heading> <Heading>Branding</Heading>
ello
<Logo /> <Logo />
</Box> </Box>
); );

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

@ -1,7 +1,7 @@
import { Box, Center, Flex, Slider, SliderFilledTrack, SliderThumb, SliderTrack } from '@chakra-ui/react'; import { Box, Center, Flex, Heading, Slider, SliderFilledTrack, SliderThumb, SliderTrack } from '@chakra-ui/react';
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
export const Logo = () => { export const Logo = (props) => {
// a completely dynamic and interactive logo // a completely dynamic and interactive logo
// uses borders, border radius, and colour themes to create a simple timeless beautiful logo // uses borders, border radius, and colour themes to create a simple timeless beautiful logo
@ -16,16 +16,16 @@ export const Logo = () => {
const [squares, setSquares] = useState(9); const [squares, setSquares] = useState(9);
const [width, setWidth] = useState(250); const [width, setWidth] = useState(props?.width || 300);
const [height, setHeight] = useState(250);
// 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
const [borderWidth, setBorderWidth] = useState(18); const [borderWidth, setBorderWidth] = useState(18);
const [borderRadius, setBorderRadius] = useState(12); const [borderRadius, setBorderRadius] = useState(0);
const [padding, setPadding] = useState(0);
const squaresArray = Array.from({ length: squares }, (_, index) => index); const squaresArray = Array.from({ length: squares }, (_, index) => index);
@ -38,48 +38,56 @@ export const Logo = () => {
const [divisions, setDivisions] = useState(3); const [divisions, setDivisions] = useState(3);
const [divisionHeight, setDivisionHeight] = useState(100 / divisions); const [boxWidth, setBoxWidth] = useState(100 / divisions + '%');
const [divisionWidth, setDivisionWidth] = useState(100 / divisions);
const uuid = useMemo(() => { const uuid = useMemo(() => {
return Math.random().toString(36).substring(2) + Date.now().toString(36); return Math.random().toString(36).substring(2) + Date.now().toString(36);
}, []); }, []);
const boxStyles = {
padding: `${padding}px`
};
const innerBox = <Box borderRadius={`${borderRadius}px`} background="hotpink" w="100%" h="100%"></Box>;
const Square = (props: any = {}) => (
<Box {...boxStyles} {...props} display="inline-block" w={boxWidth} h={boxWidth}>
{innerBox}
</Box>
);
return ( return (
<> <>
{/* these are the controls */} {/* these are the controls */}
{/* border radius use chakra slider */} {/* border radius use chakra slider */}
<Center py={12}> <Flex py={12} flexDir={'column'}>
<Slider aria-label="slider-ex-1" defaultValue={borderRadius} onChange={setBorderRadius}> <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> <SliderTrack>
<SliderFilledTrack /> <SliderFilledTrack />
</SliderTrack> </SliderTrack>
<SliderThumb>🟡</SliderThumb> <SliderThumb>🟡</SliderThumb>
</Slider> </Slider>
</Center> <Heading my={4} as="h3" size="sm">
<Box className="tt.logo" overflow="hidden" w={width + 'px'} h={height + 'px'} position="relative"> Padding
{squaresArray.map((_, idx) => { </Heading>
// technically not even in programming terms cause it starts at 0 😂 <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;
const humanIdx = idx + 1; <Square key={uuid + 'tt.logo' + index} bg={odd ? 'hotpink' : 'transparent'} />;
const even = humanIdx % 2 === 0;
const colourIndex = Math.round(idx / 2);
// log the colourIndex
console.debug('tt.colourIndex', colourIndex);
return (
<Box
display="inline-block"
key={`logo-${uuid}-${idx}`}
bg={even ? defaultTheme[colourIndex] : 'rgba(0,0,0,0)'}
w={`${divisionHeight}%`}
h={`${divisionWidth}%`}
></Box>
);
})} })}
</Box> </Box>
</> </>