import { cache } from 'react'
import { Suspense } from 'react'

const getData = cache(async (id: string) => {
  const res = await fetch(`/api/data/${id}`)
  return res.json()
})

export default async function Page({ params }: { params: { id: string } }) {
  return (
    <Suspense fallback={<Skeleton />}>
      <DataDisplay data={await getData(params.id)} />
    </Suspense>
  )
}

'use server'

import { revalidatePath } from 'next/cache'
import { z } from 'zod'

const schema = z.object({
  title: z.string().min(1),
  content: z.string().min(10)
})

export async function createPost(formData: FormData) {
  const result = schema.safeParse({
    title: formData.get('title'),
    content: formData.get('content')
  })
  if (!result.success) return { errors: result.error.flatten().fieldErrors }
  await db.post.create({ data: result.data })
  revalidatePath('/posts')
}

import { ref, computed, watchEffect } from 'vue'

export function useUser(userId: Ref<string>) {
  const user = ref<User | null>(null)
  const loading = ref(false)
  const fullName = computed(() =>
    user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
  )
  watchEffect(async () => {
    loading.value = true
    user.value = await fetchUser(userId.value)
    loading.value = false
  })
  return { user, loading, fullName }
}

import { cva, type VariantProps } from 'class-variance-authority'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md font-medium',
  {
    variants: {
      variant: {
        default: 'bg-primary text-white hover:bg-primary/90',
        outline: 'border border-input hover:bg-accent',
      },
      size: {
        sm: 'h-9 px-3 text-sm',
        default: 'h-10 px-4',
        lg: 'h-11 px-8',
      },
    },
    defaultVariants: { variant: 'default', size: 'default' },
  }
)

export function Button({ variant, size, children }: ButtonProps) {
  return <button className={buttonVariants({ variant, size })}>{children}</button>
}