semanticsubstrates.tsx

import { styled, Theme, useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { useDispatch } from 'react-redux';
import {
  changeDataPointColors,
  changePrimary,
} from '@graphpolaris/shared/data-access/store';

// Basically a styled-component
const Div = styled('div')(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
}));

const SemanticSubstrates = () => {
  const dispatch = useDispatch();
  const theme = useTheme();
  console.log('theme here ', theme);

  return (
    <>
      <Div>
        <h1>semantic substrates div</h1>
      </Div>
      <Box
        sx={{
          // Using our custom palette dataPointColors property, cast theme to any because Theme doesn't know of this custom property
          backgroundColor: (theme: Theme) => theme.palette.dataPointColors[0],
        }}
      >
        <h1>semantic substrates h1</h1>
      </Box>
      <input
        onChange={(v) =>
          dispatch(changePrimary({ main: v.currentTarget.value }))
        }
        type="color"
        name="head"
        value={theme.palette.primary.main}
      />{' '}
      Change Primary Color
      <input
        onChange={(v) =>
          dispatch(
            changeDataPointColors([
              v.currentTarget.value,
              ...theme.palette.dataPointColors.slice(1),
            ])
          )
        }
        type="color"
        id="head"
        name="head"
        value={theme.palette.dataPointColors[0]}
      />
      Change dataPointColors reflects to local
      <input
        onChange={(v) =>
          dispatch(
            changeDataPointColors([
              theme.palette.dataPointColors[0],
              v.currentTarget.value,
              ...theme.palette.dataPointColors.slice(2),
            ])
          )
        }
        type="color"
        id="head"
        name="head"
        value={theme.palette.dataPointColors[1]}
      />
      Change dataPointColors reflects to global
    </>
  );
};

export default SemanticSubstrates;