diff --git a/apps/facehash-landing/src/app/page.tsx b/apps/facehash-landing/src/app/page.tsx index 8ee99792..8535e508 100644 --- a/apps/facehash-landing/src/app/page.tsx +++ b/apps/facehash-landing/src/app/page.tsx @@ -2,6 +2,7 @@ import { Github } from "lucide-react"; import { ApiRouteExample } from "@/components/api-route-example"; import { AvatarGenerator } from "@/components/avatar-generator"; import { CodeExample } from "@/components/code-example"; +import { CopyAiPromptButton } from "@/components/copy-ai-prompt"; import { CossistantLogo } from "@/components/cossistant-logo"; import { FloatingAvatars } from "@/components/floating-avatars"; import { InlineAvatar } from "@/components/inline-avatar"; @@ -53,6 +54,12 @@ export default function Home() { a React component that generates unique avatar faces from any string. zero dependencies. works with Next.js, Vite, Remix.

+
+ + let ai implement facehash? + + +
{/* Install */} diff --git a/apps/facehash-landing/src/components/copy-ai-prompt.tsx b/apps/facehash-landing/src/components/copy-ai-prompt.tsx new file mode 100644 index 00000000..588990c8 --- /dev/null +++ b/apps/facehash-landing/src/components/copy-ai-prompt.tsx @@ -0,0 +1,93 @@ +"use client"; + +import { Check, Copy } from "lucide-react"; +import { useState } from "react"; + +const MARKDOWN = `You are helping implement Facehash avatars in a React/Next.js project. + +## What is Facehash? +A React component that generates unique, deterministic avatar faces from any string (emails, usernames, UUIDs). Zero dependencies, works offline, accessible by default. + +Key behavior: same input = same face, always. No API calls, no storage, no randomness. + +## Installation +\`\`\`bash +npm install facehash +\`\`\` + +## Basic Usage +\`\`\`tsx +import { Facehash } from "facehash"; + +// Pass any string - emails, usernames, IDs all work + +\`\`\` + +## Available Props +- \`name\` (string, required): Input string that determines the face +- \`size\` (number, default: 40): Avatar size in pixels +- \`colors\` (string[]): Custom color palette, e.g. \`["#264653", "#2a9d8f", "#e9c46a"]\` +- \`intensity3d\` ("none" | "subtle" | "medium" | "dramatic"): 3D effect intensity, default "dramatic" +- \`showInitial\` (boolean, default: true): Show first letter on face +- \`variant\` ("gradient" | "solid"): Background style, default "gradient" +- \`enableBlink\` (boolean): Enable blinking animation +- \`onRenderMouth\` (() => ReactNode): Custom mouth renderer (e.g., for loading spinners) +- \`className\` (string): CSS classes - controls face color via \`text-*\` and font styles + +## Next.js Image Route Handler +For generating avatar URLs (useful for emails, OG images, external services): + +\`\`\`ts +// app/api/avatar/route.ts +import { toFacehashHandler } from "facehash/next"; + +export const { GET } = toFacehashHandler(); +\`\`\` + +Then use as: \`\` or \`https://yoursite.com/api/avatar?name=john\` + +## Avatar with Image Fallback +When you need to show a user photo with Facehash as fallback: + +\`\`\`tsx +import { Avatar, AvatarImage, AvatarFallback } from "facehash"; + + + + + +\`\`\` + +## Implementation Guidelines +1. Replace existing avatar placeholders or boring initials with Facehash +2. Use the user's email, username, or ID as the \`name\` prop for consistency +3. Match the \`size\` prop to the existing avatar dimensions +4. For dark backgrounds, add \`className="text-white"\` for better contrast +5. If the project uses Next.js and needs avatar URLs, add the route handler +`; + +export function CopyAiPromptButton() { + const [copied, setCopied] = useState(false); + + const handleCopy = async () => { + await navigator.clipboard.writeText(MARKDOWN); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + return ( + + ); +}