thingtime_review/remix/app/components/Branding/Logo.tsx

import { Box, Center, Flex, Slider, SliderFilledTrack, SliderThumb, SliderTrack } from '@chakra-ui/react';
import React, { useMemo, useState } from 'react';

export const Logo = () => {
  // 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(250);

  const [height, setHeight] = useState(250);

  // 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(12);

  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 [divisionHeight, setDivisionHeight] = useState(100 / divisions);

  const [divisionWidth, setDivisionWidth] = useState(100 / divisions);

  const uuid = useMemo(() => {
    return Math.random().toString(36).substring(2) + Date.now().toString(36);
  }, []);

  return (
    <>
      {/* these are the controls */}
      {/* border radius use chakra slider */}
      <Center py={12}>
        <Slider aria-label="slider-ex-1" defaultValue={borderRadius} onChange={setBorderRadius}>
          <SliderTrack>
            <SliderFilledTrack />
          </SliderTrack>
          <SliderThumb>🟡</SliderThumb>
        </Slider>
      </Center>
      <Box className="tt.logo" overflow="hidden" w={width + 'px'} h={height + 'px'} position="relative">
        {squaresArray.map((_, idx) => {
          // technically not even in programming terms cause it starts at 0 😂

          const humanIdx = idx + 1;

          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>
    </>
  );
};