ArtifactyNight

---
description: ORPC Client with Tanstack Query usage patterns for Next.js applications
globs: *.ts,*.tsx
---

# ORPC Client with Tanstack Query Usage

## Client Setup and Configuration

### Basic Client Setup

ArtifactyNight

import crypto from "crypto";

// Types based on OpenAPI specification
export interface BeamCheckoutConfig {
  merchantId: string;
  secretKey: string;
  publishableKey?: string;
  baseUrl?: string;
}

ArtifactyNight

import axios, { isAxiosError } from "axios";

const BASE_URL = process.env.MANYPAY_BASE_URL as string;

export interface CreatePaymentResponse {
  ffpReferenceNo: string;
  referenceNo: string;
  qrcode: string;
  resultCode: string;
  resultMessage: string;

ArtifactyNight

"use client";

import { Input } from "@/components/ui/input";
import { X } from "lucide-react";
import React, { useEffect, useRef, useState } from "react";

interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
	defaultImageUrl?: string;
}

ArtifactyNight

import { cn } from "@/lib/utils";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import {
	Credenza,
	CredenzaBody,
	CredenzaContent,
	CredenzaDescription,
	CredenzaFooter,
	CredenzaHeader,
	CredenzaTitle,

ArtifactyNight

# syntax=docker/dockerfile:1.4

# Base image with Bun runtime
FROM oven/bun:latest AS base
WORKDIR /app

# Install dependencies only when needed
FROM base AS deps
WORKDIR /app

ArtifactyNight

import { useState } from 'react';

const useImageUploader = () => {
  const [isUploading, setIsUploading] = useState(false);

  const uploadFile = async (file: File) => {
    setIsUploading(true);

    if (!file.type.startsWith('image/')) {
      throw new Error('ไฟล์ต้องเป็นรูปภาพเท่านั้น');