console.log("hello world")

const reverse = str => str.split('').reverse().join('');
reverse('hello world');     
// Result: 'dlrow olleh'

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

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

class SequentialQueue{	//if you want it to go backwards, too bad
	next(){
		return this.i++;
	}
	constructor(start = 0){
		this.i = start;
	}
}
const que = new SequentialQueue(0);
for(let i = 0; i < 10; i++){
	console.log(que.next());
}

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