interface Draw {
  draw(): void;
}

class Size {
  constructor(public width: number, public height: number) {}
}

class Button implements Draw {
  size: Size;

  constructor(width: number, height: number, public label: string) {
    this.size = new Size(width, height);
  }

  draw() {
    console.log(
      `Drawing button width: ${this.size.width} height: ${this.size.height} with label: ${this.label}`
    );
  }

trait Draw {
    fn draw(&self) {}
}

struct Size {
    pub width: u32,
    pub height: u32,
}

struct Button {
    pub label: String,
    pub size: Size,
}
impl Draw for Button {
    fn draw(&self) {
        println!(
            "Drawing button width: {} and height: {} with label: {}",
            self.size.width, self.size.height, self.label
        );
    }

fn largest<T: PartialOrd + Copy>(list: &[T]) -> T {
    let mut largest = list[0];

    for &item in list.iter() {
        if item > largest {
            largest = item
        }
    }
    largest
}

const overlaps = (elementA: Element, elementB: Element) => {
  const rectA = elementA.getBoundingClientRect();
  const rectB = elementB.getBoundingClientRect();

  return !(
    rectA.right < rectB.left ||
    rectA.left > rectB.right ||
    rectA.bottom < rectB.top ||
    rectA.top > rectB.bottom
  );
};

import clsx from 'clsx';
import { ButtonHTMLAttributes, DetailedHTMLProps, memo } from 'react';

export type ButtonProps = {
  children: React.ReactNode;
} & DetailedHTMLProps<
  ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement
>;

const Button = ({ children, ...rest }: ButtonProps) => {
  const { className, ...props } = rest;

  return (
    <>
      <button
        className={clsx(
          'bg-white border border-transparent hover:border-gray-200',
          'outline-none hover:bg-gray-50 focus:ring-4 dark:border-transparent',
          'focus:ring-cyan-200 font-medium rounded-lg text-sm',

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './pages/**/*.{js,ts,jsx,tsx,md,mdx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './layouts/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        Aleo: ['Aleo', 'serif'],
        'Aref-Ruqaa': ['Aref Ruqaa', 'serif'],
        Barlow: ['Barlow', 'sans-serif'],
        Poppins: ['Poppins', 'sans-serif'],
        Mono: ['JetBrains Mono', '-apple-system', 'monospace'],
      },
      colors: {
        bluish: {
          gray: 'rgba(245,247,250)',

fn main() {
    let arr: [String; 6] = core::array::from_fn(|i| format!("Arr {}", i));
    println!("{:?}", arr);
}

overflow: hidden;
position: relative;
overscroll-behavior: none;

/**
 * Swap page x and y when screen orientation is portrait.
 * Method: 
 * pageX = pageY
 * pageY = -pageX
 * @param e
 * @returns {[{pageY, pageX}]}
 */
getTouches(e) {
  const isPortrait = window.matchMedia('(orientation: portrait)').matches;
  const touches = [
    {
      pageX: e.touches[0].pageX,
      pageY: e.touches[0].pageY,
    },
  ];
  if (isPortrait) {
    [touches[0].pageX, touches[0].pageY] = [
      touches[0].pageY,
      -touches[0].pageX,

export default function App() {
  const [user, setUser] = useReducer(
    (state: User, newState: Partial<User>) => ({ ...state, ...newState }),
    defaultUser
  );

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <div>
        <span>Update name: </span>
        <input
          type="text"
          value={user.name}
          onChange={(e) => setUser({ name: e.target.value })}
        />
      </div>

      <pre>{JSON.stringify(user, null, 2)}</pre>

import { css } from "@emotion/css";
import { forwardRef, useImperativeHandle, useRef } from "react";

type Props = {
  placeholder?: string;
};
export type ImpertiveHandler = {
  focus: () => void;
};

const Child = forwardRef<ImpertiveHandler, Props>(({ placeholder }, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    }
  }));

  return (

import "./styles.css";
import Child, { ImpertiveHandler } from "./Child";
import { css } from "@emotion/css";
import { useRef } from "react";

export default function App() {
  const inputRef = useRef<ImpertiveHandler>(null);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <div
        className={css`
          display: flex;
          justify-content: center;
          flex-flow: column;
          align-items: center;
        `}
      >