|
import { Box, Center, Flex, Heading, Slider, SliderFilledTrack, SliderThumb, SliderTrack } from '@chakra-ui/react';
|
|
import React, { useMemo, useState } from 'react';
|
|
|
|
export const Logo = (props) => {
|
|
// a completely dynamic and interactive logo
|
|
// uses borders, border radius, and colour themes to create a simple timeless beautiful logo
|
|
|
|
// const defaultThemeRaw = ['white', '#F20009', '#FD5F00', '#FFEB03', '#52E013', '#09A7EC', '#982E77', 'white'];
|
|
const defaultThemeRaw = ['#F20009', '#FD5F00', '#FFEB03', '#52E013', '#09A7EC', '#982E77', 'white'];
|
|
|
|
const [reverseColours, setReverseColours] = useState(false);
|
|
|
|
const defaultTheme = reverseColours ? defaultThemeRaw?.reverse() : defaultThemeRaw;
|
|
|
|
const [theme, setTheme] = useState('blue');
|
|
|
|
const [squares, setSquares] = useState(9);
|
|
|
|
const [width, setWidth] = useState(props?.width || 300);
|
|
|
|
// logo is a T/plus shape made of two intersecting squares
|
|
// you can toggle border sides on both squares to create different shapes
|
|
|
|
const [borderWidth, setBorderWidth] = useState(18);
|
|
|
|
const [borderRadius, setBorderRadius] = useState(0);
|
|
|
|
const [padding, setPadding] = useState(0);
|
|
|
|
const squaresArray = Array.from({ length: squares }, (_, index) => index);
|
|
|
|
const [spacing, setSpacing] = useState(borderWidth);
|
|
|
|
// log squaresArray
|
|
console.debug('tt.squaresArray', squaresArray);
|
|
|
|
// basically the 5 squares that make up a plus but with the centre one missing
|
|
|
|
const [divisions, setDivisions] = useState(3);
|
|
|
|
const [boxWidth, setBoxWidth] = useState(100 / divisions + '%');
|
|
|
|
const uuid = useMemo(() => {
|
|
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 (
|
|
<>
|
|
{/* 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>
|
|
<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'} />;
|
|
})}
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|