type DataRecord = {
  [`${string}_value`]: number
  [`${string}_error`]: [number, number]
  [`${string}_trend`]: number
}
type DataList = ({x: number} & DataRecord)[]

// record with key being the x axis position, and the value being all the points in this position
const chartDataRecord: Record<number, DataRecord> = {}

/*
  typeof datasets = {
    id: string
    entries: {
      x: number
      value: number
      error: [number, number]
    }[]
  }[]
*/
for (const dataset of datasets) {
  for (const entry of dataset.entries) {

    // put all entries with the same x position across different records into the same object
    if (!chartDataRecord[entry.x]) {
      chartDataRecord[entry.x] = {}
    }
    chartDataRecord[entry.x][`${dataset.id}_value`] = entry.value
    chartDataRecord[entry.x][`${dataset.id}_error`] = entry.errors
  }
}

// turn records to array
for (const x in chartDataRecord) {
  myData.push({
    x,
    ...chartDataRecord[x]
  })
}

for (const dataset in datasets) {
  const {point1, point2} = calculateTrendline(dataset)

  const datasetID = dataset.id as "id" // hack TS type
  myData.push({
    x: point1.x,
    [`${datasetID}_trend` as const]: point1.y
  })
  myData.push({
    x: point2.x
    [`${datasetID}_trend` as const]: point2.y
  })
}

type DataRecord = {
  [`${string}_value`]: number
  [`${string}_error`]: [number, number]
  [`${string}_trend`]: number
}
type DataList = ({x: number} & DataRecord)[]

// record with key being the x axis position, and the value being all the points in this position
const chartDataRecord: Record<number, DataRecord> = {}

/*
  typeof datasets = {
    id: string
    entries: {
      x: number
      value: number
      error: [number, number]
    }[]
  }[]
*/
for (const dataset of datasets) {
  for (const entry of dataset.entries) {

    // put all entries with the same x position across different records into the same object
    if (!chartDataRecord[entry.x]) {
      chartDataRecord[entry.x] = {}
    }
    chartDataRecord[entry.x][`${dataset.id}_value`] = entry.value
    chartDataRecord[entry.x][`${dataset.id}_error`] = entry.errors
  }
}

// turn records to array
for (const x in chartDataRecord) {
  myData.push({
    x,
    ...chartDataRecord[x]
  })
}

for (const dataset in datasets) {
  const {point1, point2} = calculateTrendline(dataset)

  const datasetID = dataset.id as "id" // hack TS type
  myData.push({
    x: point1.x,
    [`${datasetID}_trend` as const]: point1.y
  })
  myData.push({
    x: point2.x
    [`${datasetID}_trend` as const]: point2.y
  })
}

type DataRecord = {
  [key: `${string}_value`]: number
  [key: `${string}_error`]: [number, number],
  x: number
}

type DataList = DataRecord[]

const myData: DataList = []

// mock that the id is dynamic 
// in reality this is part of the server response
const getId = () => {
  return `id${Math.random() * 10}`
}

// lie to typescript here to pretend that this is a string literal
const id1 = getId() as 'id'
const id2 = getId() as 'id'

// this now works, though it needs the `as const` which is slightly annoying
myData.push({
  x: 0,
  [`${id1}_value` as const]: 1,
  [`${id1}_error` as const]: [0, 1],
})

myData.push({
  x: 0,
  [`${id1}_value` as const]: 1,
  [`${id1}_error` as const]: [0, 1],

  // this fails because typescript thinks both id1 and id2 are literal "id", making the keys the same
  // if we use a different string literal to pretend id2 as, there will be no more errors
  [`${id2}_value` as const]: 2,
  [`${id2}_error` as const]: [1, 1],
})

type DataRecord = {
  [key: `${string}_value`]: number
  [key: `${string}_error`]: [number, number],
  x: number
}

type DataList = DataRecord[]

const myData: DataList = []

// mock that the id is dynamic 
// in reality this is part of the server response
const getId = () => {
  return `id${Math.random() * 10}`
}

// lie to typescript here to pretend that this is a string literal
const id1 = getId() as 'id'
const id2 = getId() as 'id'

// this now works, though it needs the `as const` which is slightly annoying
myData.push({
  x: 0,
  [`${id1}_value` as const]: 1,
  [`${id1}_error` as const]: [0, 1],
})

myData.push({
  x: 0,
  [`${id1}_value` as const]: 1,
  [`${id1}_error` as const]: [0, 1],

  // this fails because typescript thinks both id1 and id2 are literal "id", making the keys the same
  // if we use a different string literal to pretend id2 as, there will be no more errors
  [`${id2}_value` as const]: 2,
  [`${id2}_error` as const]: [1, 1],
})

const CtaButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className, children, ...rest }, ref) => {
        return (
            <button
                ref={ref}
                className={cn(
                    "group relative bg-cta px-6 py-1 text-foreground hover:bg-primary",
                    className,
                )}
                {...rest}
            >
                {children}

                {/** The 4 triangles at 4 corners */}
                <div className="absolute -right-1 -top-2 h-0 w-0 rotate-[40deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
                <div className="absolute -bottom-2 -right-1 h-0 w-0 rotate-[140deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
                <div className="absolute -left-1 -top-2 h-0 w-0 -rotate-[40deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
                <div className="absolute -bottom-2 -left-1 h-0 w-0 -rotate-[140deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
            </button>
        )
    },
)
CtaButton.displayName = "CtaButton"

const CtaButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className, children, ...rest }, ref) => {
        return (
            <button
                ref={ref}
                className={cn(
                    "group relative bg-cta px-6 py-1 text-foreground hover:bg-primary",
                    className,
                )}
                {...rest}
            >
                {children}

                {/** The 4 triangles at 4 corners */}
                <div className="absolute -right-1 -top-2 h-0 w-0 rotate-[40deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
                <div className="absolute -bottom-2 -right-1 h-0 w-0 rotate-[140deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
                <div className="absolute -left-1 -top-2 h-0 w-0 -rotate-[40deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
                <div className="absolute -bottom-2 -left-1 h-0 w-0 -rotate-[140deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
            </button>
        )
    },
)
CtaButton.displayName = "CtaButton"

import { cookies, headers } from 'next/headers'
const Home = async () => {
  const myCookie = cookies().get('my-cookie-key')
  const headers = headers()
  const response = await getUser(myCookies, headers) // do whatever here
  return <>...</>
}

import { cookies, headers } from 'next/headers'
const Home = async () => {
  const myCookie = cookies().get('my-cookie-key')
  const headers = headers()
  const response = await getUser(myCookies, headers) // do whatever here
  return <>...</>
}