mayognaise

/**
 * Set `aria-live` manually here as we cannot use Swiper's navigation since we use custom arrows.
 */
function setAriaLive(el: HTMLDivElement | null, value: string) {
  if (!el) return;
  el.innerHTML = '';
  setTimeout(() => {
    el.innerHTML = `<div aria-live="polite" aria-atomic="true" className="visually-hidden">${value}</div>`;
  }, 100);
}

mayognaise

// Define either undefined or null
type Maybe<T> = T | undefined | null;

type User = {
  name: string
  email: string
  phone: Maybe<string>
}

/**

mayognaise

// When all keys are optional
type User = Partial<{
  name: string
  email: string
  phone: string
}>

/**
type User = {
    name?: string | undefined;

mayognaise

// When one key is optional
type User = {
  name: string
  email: string
  phone?: string
}

/**
type User = {
    name: string;

mayognaise

const sizes = [
  { variant: 'sm', value: 8 },
  { variant: 'md', value: 16 },
  { variant: 'lg', value: 24 },
] as const

type SizeKey = keyof typeof sizes[number] // "variant" | "value"
type SizeVariant = typeof sizes[number]['variant'] // "sm" | "md" | "lg"
type SizeValue = typeof sizes[number]['value'] // 8 | 16 | 24

mayognaise

const colors = {
  bg: '#e5e5e5',
  navy: '#002b45',
  orange: '#fb5a3b',
  darkOrange: '#cf4d34',
} as const

type ColorValue = typeof colors[keyof typeof colors] // "#e5e5e5" | "#002b45" | "#fb5a3b" | "#cf4d34"

mayognaise

const colors = {
  bg: '#e5e5e5',
  navy: '#002b45',
  orange: '#fb5a3b',
  darkOrange: '#cf4d34',
} as const

type ColorKey = keyof typeof colors // "navy" | "orange" | "bg" | "darkOrange"

mayognaise

/**
A hook to manage boolean

@example
function Example() {
  const [flag, setFlag] = useBoolean()
  return (
    <>
      <p>Boolean state: {flag}</p>
      <button onClick={setFlag.on}>On</button>

mayognaise

.mask-gradient-bottom {
  mask-image: linear-gradient(to bottom, black 2%, transparent 98%);
}

.mask-gradient-top {
  mask-image: linear-gradient(to top, black 2%, transparent 98%);
}

mayognaise

.line-clamp {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* max line length */
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}