const flat = arr => [].concat.apply([], arr.map(a => Array.isArray(a) ? flat(a) : a));
// Or
const flat = arr => arr.reduce((a, b) => Array.isArray(b) ? [...a, ...flat(b)] : [...a, b], []);

// Or
// See the browser compatibility at https://caniuse.com/#feat=array-flat
const flat = arr => arr.flat();

// Example
flat(['cat', ['lion', 'tiger']]);   // ['cat', 'lion', 'tiger']

//QM Helper by Leif Messinger
//Groups numbers by number of bits and shows their binary representations.
//To be used on x.com
const minterms = prompt("Enter your minterms separated by commas").split(",").map(x => parseInt(x.trim()));
const maxNumBits = minterms.reduce(function(a, b) {
	return Math.max(a, Math.log2(b));
});
const bitGroups = [];
for(let i = 0; i < maxNumBits; ++i){
	bitGroups.push([]);
}
for(const minterm of minterms){
	let outputString = (minterm+" ");
	//Count the bits
	let count = 0;
	for (var i = maxNumBits; i >= 0; --i) {
		if((minterm >> i) & 1){
			++count;
			outputString += "1";
		}else{
			outputString += "0";
		}
	}
	bitGroups[count].push(outputString);
}
document.body.textContent = "";
document.body.style.setProperty("white-space", "pre");
for(const group of bitGroups){
	for(const outputString of group){
		document.body.textContent += outputString + "\r\n";
	}
}

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

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 reverse = str => str.split('').reverse().join('');
reverse('hello world');     
// Result: 'dlrow olleh'

<div className="md:self-start sticky top-16 bg-background px-4 mt-1 sm:px-6 md:pt-4 lg:pl-8 lg:pr-4">
          <ScrollArea className="whitespace-nowrap">
            <div className="w-max flex md:flex-col gap-1 bg-transparent text-muted-foreground pb-2">
              {menuData.map((section) => (
                <Button
                  key={section.title}
                  onClick={() => handleScrollToSection(section.title)}
                  variant="ghost"
                  size="sm"
                  className={cn(
                    'w-auto md:w-full hover:cursor-pointer relative md:justify-end',
                    activeSection === section.title
                      ? cn(
                          'text-foreground after:absolute after:bottom-[-2px] after:bottom-0 after:w-full after:h-[2px] after:bg-primary',
                          'md:after:right-[-2px] md:after:top-0 md:after:h-full md:after:w-[2px]',
                        )
                      : '',
                  )}
                >
                  {section.title}
                </Button>
              ))}
            </div>
            <ScrollBar orientation="horizontal" />
          </ScrollArea>
        </div>