const ResponsiveCardImg = styled(Card.Img)`
    // For screens wider than 768px
    @media(min-width: 768px) {
        // Your responsive styles here.
    }

    // For screens smaller than 768px
    @media(max-width: 768px) {
        // Your responsive styles here.
    }
`

export default function App() {
    return (
        <MainContainer>
            <Container>
                <Card text='white' bg='dark' style={styles.mainCard}>
                <ResponsiveCardImg
                    style={styles.cardImage}
                    onClick={handleClick}
                    src={apeImage}
                    alt='Degenerate Ape Academy'
                />
                <Card.Body>
                    <Card.Title className='text-center' as='h2'>
                    {apeId}
                    </Card.Title>
                </Card.Body>
                </Card>
            </Container>
        </MainContainer>
    );
}

// Generate a random HEX color
randomColor = () => `#${Math.random().toString(16).slice(2, 8).padStart(6, '0')}`;

// Or
const randomColor = () => `#${(~~(Math.random()*(1<<24))).toString(16)}`;

const compactObject = val => {
  const data = Array.isArray(val) ? val.filter(Boolean) : val;
  return Object.keys(data).reduce(
    (acc, key) => {
      const value = data[key];
      if (Boolean(value))
        acc[key] = typeof value === 'object' ? compactObject(value) : value;
      return acc;
    },
    Array.isArray(val) ? [] : {}
  );
};

const obj = {
  a: null,
  b: false,
  c: true,
  d: 0,
  e: 1,
  f: '',
  g: 'a',
  h: [null, false, '', true, 1, 'a'],
  i: { j: 0, k: false, l: 'a' }
};
compactObject(obj);
// { c: true, e: 1, g: 'a', h: [ true, 1, 'a' ], i: { l: 'a' } }

import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
import profile from "./profile";
import auth from "./auth";
import alert from "./alert";

const reducer = combineReducers({
	profile,
	auth,
	alert,
});

const store = configureStore({ reducer });

export default store;

export const Main = () => {
    const [title, setTitle] = useState('');
    
    return (
        <ChildComponent
            title={title}
            onChange={e => setTitle(e.target.value)}
        />
    );
};

export const ChildComponent = ({ title, onChange }) => {
    return (
        <Box component="form" onSubmit={() => {}} noValidate mt={5}>
            <TextField
                fullWidth
                id="title"
                label="Title"
                name="title"
                autoComplete="title"
                autoFocus
                color="primary"
                variant="filled"
                InputLabelProps={{ shrink: true }}
                value={title}
                onChange={onChange}
            />
        </Box>
    );
};

const getTimezone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;

// Example
getTimezone();