class Timer{
	start(){
		this.startTime = Date.now();
	}
	stop(){
		const dt = Date.now() - this.startTime;
		console.log(dt);
		return dt;
	}
	getExecTime(fun, asynchronous){
		return asynchronous ? this.getAsyncExecTime(fun) : this.getSyncExecTime(fun);
	}
	getSyncExecTime(fun){
		this.start();
		fun();
		return this.stop();
	}
	async getAsyncExecTime(fun){
		this.start();
		await fun();
		return this.stop();
	}
	static average(fun, numTimes, asynchronous = false){
		const times = [];
		const promises = [];
		let timer = new Timer();
		if(asynchronous){
			for(let i = 0; i < numTimes; i++){
				timer.getAsyncExecTime(fun);
			}
		}else{
			for(let i = 0; i < numTimes; i++){
				timer.getSyncExecTime(fun);
			}
		}
		return (times => times.reduce(((sum, acc) => sume + acc), 0) / times.length);
	}
	static async timeAsync(fun, numTimes){
		if(numTimes <= 1) return new Timer().getAsyncExecTime(fun);
		const promises = [];
		let timer = new Timer(true);
		for(let i = 0; i < numTimes; i++){
			promises.push(fun().catch((e)=>{}));
		}
		try{
			await Promise.all(promises).catch((e)=>{});
		}catch(e){
			//do absolutely nothing
		}
		return timer.stop();
	}
	constructor(start = false){
		if(start) this.start();
	}
}

const gcd = (...arr) => {
  const _gcd = (x, y) => (!y ? x : gcd(y, x % y));
  return [...arr].reduce((a, b) => _gcd(a, b));
};

gcd(8, 36); // 4
gcd(...[12, 8, 32]); // 4

const geometricProgression = (end, start = 1, step = 2) =>
  Array.from({
    length: Math.floor(Math.log(end / start) / Math.log(step)) + 1,
  }).map((_, i) => start * step ** i);
  
geometricProgression(256); // [1, 2, 4, 8, 16, 32, 64, 128, 256]
geometricProgression(256, 3); // [3, 6, 12, 24, 48, 96, 192]
geometricProgression(256, 1, 4); // [1, 4, 16, 64, 256]

const head = arr => (arr && arr.length ? arr[0] : undefined);

head([1, 2, 3]); // 1
head([]); // undefined
head(null); // undefined
head(undefined); // undefined

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

<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>