CodeSnippet Hub

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

import { useEffect, useState } from 'react';

export function useDebounce<T>(value: T, delay = 300): T {
  const [v, setV] = useState(value);
  useEffect(() => { const t = setTimeout(() => setV(value), delay); return () => clearTimeout(t); }, [value, delay]);
  return v;
}

import { useEffect, useState } from 'react';

export function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    if (typeof window === 'undefined') return initial;
    try { const raw = localStorage.getItem(key); return raw ? JSON.parse(raw) : initial; } catch { return initial; }
  });
  useEffect(() => { try { localStorage.setItem(key, JSON.stringify(value)); } catch {} }, [key, value]);
  return [value, setValue] as const;
}

import { useEffect, useState } from 'react';

export function useMediaQuery(query: string) {
  const [matches, setMatches] = useState(false);
  useEffect(() => {
    const mql = window.matchMedia(query);
    const update = () => setMatches(mql.matches);
    update();
    mql.addEventListener('change', update);
    return () => mql.removeEventListener('change', update);
  }, [query]);
  return matches;
}

import { useEffect, RefObject } from 'react';

export function useClickOutside<T extends HTMLElement>(ref: RefObject<T>, onOut: () => void) {
  useEffect(() => {
    const h = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) onOut(); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, [ref, onOut]);
}

export async function fetchWithRetry(url: string, init: RequestInit = {}, retries = 3, backoff = 400): Promise<Response> {
  try {
    const res = await fetch(url, init);
    if (!res.ok && retries > 0 && res.status >= 500) throw new Error('retry');
    return res;
  } catch (err) {
    if (retries <= 0) throw err;
    await new Promise(r => setTimeout(r, backoff));
    return fetchWithRetry(url, init, retries - 1, backoff * 2);
  }
}

const hits = new Map<string, number[]>();
export function allow(key: string, max = 10, windowMs = 60_000) {
  const now = Date.now();
  const arr = (hits.get(key) || []).filter(t => now - t < windowMs);
  if (arr.length >= max) return false;
  arr.push(now); hits.set(key, arr); return true;
}

import { NextRequest, NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ ok: true, ts: Date.now() });
}

export async function POST(req: NextRequest) {
  try {
    const body = await req.json();
    return NextResponse.json({ received: body });
  } catch {
    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
  }
}

import { NextResponse, type NextRequest } from 'next/server';

export function middleware(req: NextRequest) {
  const token = req.cookies.get('session')?.value;
  if (!token && req.nextUrl.pathname.startsWith('/admin')) {
    const url = req.nextUrl.clone(); url.pathname = '/login';
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

export const config = { matcher: ['/admin/:path*'] };

export default function loader({ src, width, quality }: { src: string; width: number; quality?: number }) {
  return class="tok-str">`https:class="tok-comment">//cdn.example.com/${src}?w=${width}&q=${quality || 75}`;
}

<class="tok-tag">div class="rounded-2xl p-6 backdrop-blur-2xl bg-white/[0.06] border border-white/10 shadow-xl">
  <class="tok-tag">h3 class="text-white text-lg font-semibold">Premium Card</class="tok-tag">h3>
  <class="tok-tag">p class="text-white/70 text-sm mt-1">Glass effect with soft border.</class="tok-tag">p>
</class="tok-tag">div>

<class="tok-tag">h1 class="text-5xl font-bold bg-gradient-to-r from-amber-300 via-yellow-400 to-amber-200 bg-clip-text text-transparent">
  Beautiful gradient
</class="tok-tag">h1>

<class="tok-tag">div class="flex gap-3 p-6 bg-black">
  <class="tok-tag">button class="px-5 py-2.5 rounded-xl bg-amber-400 text-black font-semibold hover:bg-amber-300 transition">Primary</class="tok-tag">button>
  <class="tok-tag">button class="px-5 py-2.5 rounded-xl border border-white/20 text-white hover:border-amber-400 transition">Secondary</class="tok-tag">button>
  <class="tok-tag">button class="px-5 py-2.5 rounded-xl text-white/70 hover:text-white transition">Ghost</class="tok-tag">button>
</class="tok-tag">div>

<class="tok-tag">div class="space-y-3 p-6">
  <class="tok-tag">div class="h-4 w-3/4 rounded bg-gradient-to-r from-zinc-700 via-zinc-600 to-zinc-700 animate-pulse"></class="tok-tag">div>
  <class="tok-tag">div class="h-4 w-1/2 rounded bg-gradient-to-r from-zinc-700 via-zinc-600 to-zinc-700 animate-pulse"></class="tok-tag">div>
  <class="tok-tag">div class="h-4 w-5/6 rounded bg-gradient-to-r from-zinc-700 via-zinc-600 to-zinc-700 animate-pulse"></class="tok-tag">div>
</class="tok-tag">div>

import { motion } from 'framer-motion';
const parent = { hidden: {}, show: { transition: { staggerChildren: 0.08 } } };
const child = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 } };
export function StaggerList({ items }: { items: string[] }) {
  return (
    <motion.ul variants={parent} initial="hidden" animate="show">
      {items.map(t => <motion.li key={t} variants={child}>{t}</motion.li>)}
    </motion.ul>
  );
}

import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors({ origin: process.env.ORIGIN || '*' }));
app.use(express.json({ limit: '1mb' }));
app.get('/health', (_, res) => res.json({ ok: true }));
app.listen(process.env.PORT || 3001);

export async function listUsers(page = 1, pageSize = 20) {
  const skip = (page - 1) * pageSize;
  const [total, items] = await Promise.all([
    prisma.user.count(),
    prisma.user.findMany({ skip, take: pageSize, orderBy: { createdAt: 'desc' } }),
  ]);
  return { items, total, page, pageSize, pages: Math.ceil(total / pageSize) };
}

-- First page
SELECT id, created_at, title
FROM posts
ORDER BY created_at DESC, id DESC
LIMIT 20;

-- Next page (use last row's values)
SELECT id, created_at, title
FROM posts
WHERE (created_at, id) < ($1, $2)
ORDER BY created_at DESC, id DESC
LIMIT 20;

import { z } from 'zod';

const schema = z.object({
  DATABASE_URL: z.string().url(),
  NEXTAUTH_SECRET: z.string().min(32),
  NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
});

export const env = schema.parse(process.env);

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.video-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border-radius: 1rem;
  overflow: hidden;
}

#!/usr/bin/env bash
set -euo pipefail
TS=$(date +%s)
TARGET=/var/www/app/releases/$TS
mkdir -p "$TARGET"
rsync -a --delete ./build/ "$TARGET/"
ln -sfn "$TARGET" /var/www/app/current
sudo systemctl reload nginx
echo "Deployed release $TS"

#!/usr/bin/env bash
set -euo pipefail
DB="$1"
DIR="/var/backups/postgres"
mkdir -p "$DIR"
pg_dump "$DB" | gzip > "$DIR/${DB}-$(date +%F).sql.gz"
find "$DIR" -mtime +14 -delete

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true
  }
}