[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts .env [V0_FILE]markdown:file="README.md" isMerged="true" # basehub-blog *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/julian/v0-basehub-blog) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/wScF0riJ6Hd) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/julian/v0-basehub-blog](https://vercel.com/julian/v0-basehub-blog)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/wScF0riJ6Hd](https://v0.dev/chat/projects/wScF0riJ6Hd)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/components/avatar.tsx" isMerged="true" import { BaseHubImage } from "basehub/next-image"; export default function Avatar({ title, url }: { title: string; url: string }) { return (

{title}

); } [V0_FILE]typescriptreact:file="app/components/body-image.tsx" isMerged="true" import { BaseHubImage } from "basehub/next-image" export function BodyImage({ ...props }: { src: string alt?: string | undefined width?: number | undefined height?: number | undefined caption?: string | undefined }) { return (

{props.caption && (

{props.caption}

)} ) } [V0_FILE]typescriptreact:file="app/components/copy-to-clipboard.tsx" isMerged="true" "use client"; import { useState } from "react"; import CheckIcon from "./icons/check-icon"; import ClipboardIcon from "./icons/clipboard-icon"; export default function CopyToClipboard({ code }: { code: string }) { const [copied, setCopied] = useState(false); const copyToClipboard = async () => { try { await navigator.clipboard.writeText(code); setCopied(true); console.log("Copied to clipboard"); } catch (error) { console.error("Error copying to clipboard", error); } finally { setTimeout(() => { setCopied(false); }, 2000); } }; return ( ); } [V0_FILE]typescriptreact:file="app/components/cover-image.tsx" isMerged="true" import Link from "next/link" import { clsx } from "clsx" import { BaseHubImage } from "basehub/next-image" export default function CoverImage({ title, url, slug, width, height, priority, className, }: { title: string url: string slug?: string width: number height: number priority?: boolean className?: string }) { const image = ( ) return (

{slug ? ( {image} ) : ( image )}

) } [V0_FILE]typescriptreact:file="app/components/date.tsx" isMerged="true" import { format } from "date-fns"; export default function DateComponent({ dateString }: { dateString: string }) { return ( {format(new Date(dateString), "LLLL d, yyyy")} ); } [V0_FILE]typescriptreact:file="app/components/footer.tsx" isMerged="true" export default function Footer() { return ( ); } [V0_FILE]typescriptreact:file="app/components/hero-post.tsx" isMerged="true" import Link from "next/link" import Date from "./date" import CoverImage from "./cover-image" import Avatar from "./avatar" import { fragmentOn } from "basehub" export const PostMetaFragment = fragmentOn("PostsItem", { _id: true, _slug: true, _title: true, author: { _title: true, avatar: { url: true, alt: true, }, }, coverImage: { url: true, alt: true, aspectRatio: true, }, date: true, excerpt: true, }) export type PostMetaFragment = fragmentOn.infer export function HeroPost({ _title, coverImage, date, excerpt, author, _slug, }: PostMetaFragment) { return (

{_title}

{excerpt}

{author && }

) } [V0_FILE]typescriptreact:file="app/components/icons/check-icon.tsx" isMerged="true" export default function CheckIcon() { return ( ); } [V0_FILE]typescriptreact:file="app/components/icons/clipboard-icon.tsx" isMerged="true" export default function ClipboardIcon() { return ( ); } [V0_FILE]typescriptreact:file="app/components/icons/file-icon.tsx" isMerged="true" export default function FileIcon() { return ( ); } [V0_FILE]typescriptreact:file="app/components/intro.tsx" isMerged="true" import { CMS_NAME, CMS_URL } from "@/lib/constants"; export function Intro() { return (

Blog.

A blog example using{" "} v0 {" "} and{" "} {CMS_NAME} .

); } [V0_FILE]typescriptreact:file="app/components/more-stories.tsx" isMerged="true" import { PostPreview } from "./post-preview"; import { PostMetaFragment } from "./hero-post"; export function MoreStories({ morePosts, title, }: { morePosts: PostMetaFragment[]; title: React.ReactNode; }) { return (

{title}

{morePosts.map((post) => { return ; })}

); } [V0_FILE]typescriptreact:file="app/components/newsletter.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { parseFormData, sendEvent } from "basehub/events" import { Subscribers } from "@/basehub" interface NewsletterProps { newsletter: Pick } export function Newsletter({ newsletter }: NewsletterProps) { const [isSubmitting, setIsSubmitting] = useState(false) const [message, setMessage] = useState<{ type: "success" | "error" text: string } | null>(null) const handleSubmit = async (formData: FormData) => { setIsSubmitting(true) setMessage(null) try { const parsedSubmission = parseFormData( newsletter.ingestKey, newsletter.schema, formData, ) if (!parsedSubmission.success) { throw new Error(JSON.stringify(parsedSubmission.errors)) } await sendEvent(newsletter.ingestKey, parsedSubmission.data) setMessage({ type: "success", text: "Thanks for subscribing! You'll receive our latest updates.", }) // Reset form const form = document.querySelector("form") as HTMLFormElement form?.reset() } catch (error) { console.error("Newsletter submission error:", error) setMessage({ type: "error", text: "Something went wrong. Please try again later.", }) } finally { setIsSubmitting(false) } } return (

Stay Updated

Subscribe to our newsletter to get the latest posts delivered straight to your inbox.

{newsletter.schema.map((field) => (

{field.type === "email" ? (

) : (

{field.label}

)}

))} {newsletter.schema.length === 0 && (

)} {message && (

{message.text}

)}

) } [V0_FILE]typescriptreact:file="app/components/playground-notification.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { AlertTriangle, Check, Clock, ExternalLink } from "lucide-react" import { cn } from "@/lib/utils" interface PlaygroundSetupModalProps { playgroundInfo: { expiresAt: string | null editUrl: string claimUrl: string | null } envs: Record } export function PlaygroundSetupModal({ playgroundInfo, envs, }: PlaygroundSetupModalProps) { const [isDismissed, setIsDismissed] = useState(false) const [open, setOpen] = useState(false) // Convert envs object to EnvCheckResult array const envResults = Object.values(envs) const validCount = envResults.filter((env) => env.isValid).length const allValid = validCount === envResults.length const hasPlaygroundExpiry = !!playgroundInfo.expiresAt useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { setOpen(false) } } if (open) { window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) } }, [open]) const formatTimeRemaining = (expiresAt: string | null) => { if (!expiresAt) return "expired" const now = new Date() const expiry = new Date(expiresAt) const diff = expiry.getTime() - now.getTime() if (diff <= 0) return "expired" const days = Math.floor(diff / (1000 * 60 * 60 * 24)) const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) if (days > 0) { return `${days} day${days !== 1 ? "s" : ""}, ${hours} hour${hours !== 1 ? "s" : ""}` } return `${hours} hour${hours !== 1 ? "s" : ""}` } if (isDismissed) return null // Show if playground has expiry OR environment variables are missing const shouldShow = !allValid if (!shouldShow) return null return (

{/* Backdrop */}

setOpen(false)} className={cn( "absolute inset-0 transition-all duration-200", open ? "pointer-events-auto bg-black/30 opacity-100" : "pointer-events-none opacity-0", )} /> {/* Modal */}

Blog Setup

Open Playground

{playgroundInfo.expiresAt && (

This playground expires in{" "} {formatTimeRemaining(playgroundInfo.expiresAt)}.{" "} {playgroundInfo.claimUrl && ( Claim it. )}

)} {/* Environment Variables List */} {!allValid && (

{envResults.map((env, index) => (

{env.isValid ? ( ) : ( )}

{env.label}

{env.name}

{env.isValid ? "Set" : "Missing"}

))}

)}

{/* Dismiss Button */}

) } [V0_FILE]typescriptreact:file="app/components/post-preview.tsx" isMerged="true" import Link from "next/link" import Avatar from "./avatar" import Date from "./date" import CoverImage from "./cover-image" import { PostMetaFragment } from "./hero-post" export function PostPreview({ _title, coverImage, date, excerpt, author, _slug, }: PostMetaFragment) { return (

{_title}

{excerpt}

{author && }

) } [V0_FILE]typescriptreact:file="app/components/post.tsx" isMerged="true" import { RichText } from "basehub/react-rich-text" import { CodeBlock } from "basehub/react-code-block" import CoverImage from "@/app/components/cover-image" import Avatar from "@/app/components/avatar" import Date from "@/app/components/date" import { BodyImage } from "./body-image" import { fragmentOn } from "basehub" import { PostMetaFragment } from "./hero-post" export const PostFragment = fragmentOn("PostsItem", { ...PostMetaFragment, body: { json: { content: true } }, }) export type PostFragment = fragmentOn.infer export function Post({ _title, author, date, coverImage, body }: PostFragment) { return (

{_title}

{author && }

, pre: ({ code, language }) => ( ), li: (props) =>

}} > {body.json.content}

) } [V0_FILE]typescriptreact:file="app/components/theme-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" export function ThemeToggle() { const [mounted, setMounted] = useState(false) const { theme, setTheme } = useTheme() useEffect(() => { setMounted(true) }, []) if (!mounted) { return ( ) } return ( ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } :root::selection { @apply bg-orange-600 text-white; } [V0_FILE]typescriptreact:file="app/posts/[slug]/page.tsx" isMerged="true" import Link from "next/link" import type { Metadata } from "next" import { notFound } from "next/navigation" import { basehub } from "basehub" import { Post, PostFragment } from "@/app/components/post" import { MoreStories } from "@/app/components/more-stories" import { PostMetaFragment } from "@/app/components/hero-post" export const dynamic = "force-static" export const revalidate = 30 export async function generateStaticParams() { const data = await basehub().query({ blog: { posts: { items: { _slug: true } } }, }) return data.blog.posts.items.map((post) => ({ slug: post._slug })) } type PageProps = { params: Promise<{ slug: string }> } export async function generateMetadata({ params, }: PageProps): Promise { const { slug } = await params const postData = await basehub().query({ meta: { title: true, }, blog: { posts: { __args: { first: 1, filter: { _sys_slug: { eq: slug } } }, items: PostMetaFragment, }, }, }) const [post] = postData.blog.posts.items if (!post) notFound() const postTitle = post._title const postDescription = post.excerpt const postOgImage = post.coverImage?.url const siteTitle = postData.meta?.title || `BaseHub x v0 Example` return { title: `${postTitle} | ${siteTitle}`, description: postDescription, openGraph: { title: postTitle, description: postDescription, images: postOgImage ? [ { url: postOgImage, width: 1200, height: 630, alt: postTitle, }, ] : [], }, twitter: { card: "summary_large_image", title: postTitle, description: postDescription, images: postOgImage ? [postOgImage] : [], }, } } export default async function PostPage({ params }: PageProps) { const { slug } = await params const [postData, morePostsData] = await Promise.all([ basehub().query({ blog: { morePosts: true, posts: { __args: { first: 1, filter: { _sys_slug: { eq: slug } } }, items: PostFragment, }, }, }), basehub().query({ blog: { posts: { __args: { filter: { _sys_slug: { notEq: slug } }, first: 8, orderBy: "date__DESC", }, items: PostMetaFragment, }, }, }), ]) const [post] = postData.blog.posts.items if (!post) notFound() return (

Blog.

) } [V0_FILE]typescript:file="basehub.config.ts" isMerged="true" import { setGlobalConfig } from "basehub" // Updated constant name for testing saves const _vercel_url_env = "VERCEL_URL" let v0Id = process.env[_vercel_url_env] if (v0Id && v0Id.includes("vusercontent")) { v0Id = v0Id.split(".")[0] } const playgroundId = `${v0Id ? encodeURIComponent(v0Id) : "__dev"}__rel_v0` setGlobalConfig({ fallbackPlayground: playgroundId ? { target: "basehub/nextjs-blog", id: playgroundId } : undefined, }) [V0_FILE]typescript:file="basehub.d.ts" isMerged="true" // @ts-nocheck /* istanbul ignore file */ /* tslint:disable */ /* eslint-disable */ /*============================================================================= * This file was automatically generated by the BaseHub SDK and contains type * definitions based on your repository schema. Credits to https://genql.dev/ * for the type generation. * * You can safely commit this to version control. *============================================================================*/ declare module "basehub" { export interface Query extends _Query {} export interface QueryGenqlSelection extends _QueryGenqlSelection {} export interface Mutation extends _Mutation {} export interface MutationGenqlSelection extends _MutationGenqlSelection {} export interface FragmentsMap extends _FragmentsMap {} export interface Scalars extends _Scalars {} } import type { Transaction } from 'basehub/api-transaction' interface _Query extends Query {} interface _QueryGenqlSelection extends QueryGenqlSelection {} interface _Mutation extends Mutation {} interface _MutationGenqlSelection extends MutationGenqlSelection {} interface _FragmentsMap extends FragmentsMap {} interface _Scalars extends Scalars {} export interface Scalars { BSHBEventSchema: ({ name: string; required: boolean; placeholder?: string; defaultValue?: string; helpText?: string } & { id: string; label: string } & ({ type: "text" | "textarea" | "number" | "date" | "datetime" | "email" | "checkbox" | "hidden" } | { type: "select" | "radio"; options: string[]; multiple: boolean } | { type: "file"; private: boolean }))[], BSHBRichTextContentSchema: RichTextNode[], BSHBRichTextTOCSchema: RichTextTocNode[], Boolean: boolean, CodeSnippetLanguage: B_Language, DateTime: any, Float: number, ID: string, Int: number, JSON: any, String: string, bshb_event__530312905: `bshb_event__530312905:${string}`, schema_bshb_event__530312905: {email: string;}, bshb_workflow_218139063: `bshb_workflow_218139063:${string}`, schema_bshb_workflow_218139063: { timestamp: string, type: 'list-block.created', data: { listBlockId: string; listBlockTitle?: string; blockId: string } }, } export type AnalyticsKeyScope = 'query' | 'send' export interface Authors { _analyticsKey: Scalars['String'] _dashboardUrl: Scalars['String'] _id: Scalars['String'] _idPath: Scalars['String'] _meta: ListMeta /** The key used to search from the frontend. */ _searchKey: Scalars['String'] _slug: Scalars['String'] _slugPath: Scalars['String'] _sys: BlockDocumentSys _title: Scalars['String'] /** Returns the first item in the list, or null if the list is empty. Useful when you expect only one result. */ item: (AuthorsItem | null) /** Returns the list of items after filtering and paginating according to the arguments sent by the client. */ items: AuthorsItem[] __typename: 'Authors' } export interface AuthorsItem { _analyticsKey: Scalars['String'] _dashboardUrl: Scalars['String'] _id: Scalars['String'] _idPath: Scalars['String'] _slug: Scalars['String'] _slugPath: Scalars['String'] _sys: BlockDocumentSys _title: Scalars['String'] avatar: BlockImage __typename: 'AuthorsItem' } export type AuthorsItemOrderByEnum = '_sys_createdAt__ASC' | '_sys_createdAt__DESC' | '_sys_hash__ASC' | '_sys_hash__DESC' | '_sys_id__ASC' | '_sys_id__DESC' | '_sys_lastModifiedAt__ASC' | '_sys_lastModifiedAt__DESC' | '_sys_slug__ASC' | '_sys_slug__DESC' | '_sys_title__ASC' | '_sys_title__DESC' | 'avatar__ASC' | 'avatar__DESC' export interface BaseRichTextJson { blocks: Scalars['String'] content: Scalars['BSHBRichTextContentSchema'] toc: Scalars['BSHBRichTextTOCSchema'] __typename: 'BaseRichTextJson' } export interface BlockAudio { /** The duration of the audio in seconds. If the duration is not available, it will be estimated based on the file size. */ duration: Scalars['Float'] fileName: Scalars['String'] fileSize: Scalars['Int'] lastModified: Scalars['Float'] mimeType: Scalars['String'] url: Scalars['String'] __typename: 'BlockAudio' } export interface BlockCodeSnippet { allowedLanguages: Scalars['CodeSnippetLanguage'][] code: Scalars['String'] /** @deprecated Figuring out the correct api. */ html: Scalars['String'] language: Scalars['CodeSnippetLanguage'] __typename: 'BlockCodeSnippet' } export interface BlockColor { b: Scalars['Int'] g: Scalars['Int'] hex: Scalars['String'] hsl: Scalars['String'] r: Scalars['Int'] rgb: Scalars['String'] __typename: 'BlockColor' } export type BlockDocument = (Authors | AuthorsItem | Blog | Meta | Newsletter | Posts | PostsItem | authorsItem_AsList | postsItem_AsList) & { __isUnion?: true } export interface BlockDocumentSys { apiNamePath: Scalars['String'] createdAt: Scalars['String'] hash: Scalars['String'] id: Scalars['ID'] idPath: Scalars['String'] lastModifiedAt: Scalars['String'] slug: Scalars['String'] slugPath: Scalars['String'] title: Scalars['String'] __typename: 'BlockDocumentSys' } export interface BlockFile { fileName: Scalars['String'] fileSize: Scalars['Int'] lastModified: Scalars['Float'] mimeType: Scalars['String'] url: Scalars['String'] __typename: 'BlockFile' } export interface BlockImage { alt: (Scalars['String'] | null) aspectRatio: Scalars['String'] blurDataURL: Scalars['String'] fileName: Scalars['String'] fileSize: Scalars['Int'] height: Scalars['Int'] lastModified: Scalars['Float'] mimeType: Scalars['String'] /** @deprecated Renamed to `blurDataURL` to match Next.js Image's naming convention. */ placeholderURL: Scalars['String'] /** @deprecated Use `url` instead. */ rawUrl: Scalars['String'] thumbhash: Scalars['String'] /** * This field is used to generate the image URL with the provided options. The options are passed as arguments. For example, if you want to resize the image to 200x200 pixels, you can use the following query: * * ```graphql * { * imageBlock { * url(width: 200, height: 200) * } * } * ``` * * This will return the URL with the width and height set to 200 pixels. * * BaseHub uses Cloudflare for image resizing. Check out [all available options in their docs](https://developers.cloudflare.com/images/transform-images/transform-via-workers/#fetch-options). * */ url: Scalars['String'] width: Scalars['Int'] __typename: 'BlockImage' } export type BlockList = (Authors | Posts | authorsItem_AsList | postsItem_AsList) & { __isUnion?: true } export interface BlockOgImage { height: Scalars['Int'] url: Scalars['String'] width: Scalars['Int'] __typename: 'BlockOgImage' } /** Rich text block */ export type BlockRichText = (Body) & { __isUnion?: true } export interface BlockVideo { aspectRatio: Scalars['String'] /** The duration of the video in seconds. If the duration is not available, it will be estimated based on the file size. */ duration: Scalars['Float'] fileName: Scalars['String'] fileSize: Scalars['Int'] height: Scalars['Int'] lastModified: Scalars['Float'] mimeType: Scalars['String'] url: Scalars['String'] width: Scalars['Int'] __typename: 'BlockVideo' } export interface Blog { _analyticsKey: Scalars['String'] _dashboardUrl: Scalars['String'] _id: Scalars['String'] _idPath: Scalars['String'] _slug: Scalars['String'] _slugPath: Scalars['String'] _sys: BlockDocumentSys _title: Scalars['String'] authors: Authors morePosts: Scalars['String'] posts: Posts __typename: 'Blog' } export interface Body { html: Scalars['String'] json: BodyRichText markdown: Scalars['String'] plainText: Scalars['String'] readingTime: Scalars['Int'] __typename: 'Body' } export interface BodyRichText { content: Scalars['BSHBRichTextContentSchema'] toc: Scalars['BSHBRichTextTOCSchema'] __typename: 'BodyRichText' } export interface GetUploadSignedURL { signedURL: Scalars['String'] uploadURL: Scalars['String'] __typename: 'GetUploadSignedURL' } export interface ListMeta { /** Number of items after applying filters but before pagination */ filteredCount: Scalars['Int'] /** Total number of items in collection before any filtering/pagination */ totalCount: Scalars['Int'] __typename: 'ListMeta' } export type MediaBlock = (BlockAudio | BlockFile | BlockImage | BlockVideo) & { __isUnion?: true } export type MediaBlockUnion = (BlockAudio | BlockFile | BlockImage | BlockVideo) & { __isUnion?: true } export interface Meta { _analyticsKey: Scalars['String'] _dashboardUrl: Scalars['String'] _id: Scalars['String'] _idPath: Scalars['String'] _slug: Scalars['String'] _slugPath: Scalars['String'] _sys: BlockDocumentSys _title: Scalars['String'] description: (Scalars['String'] | null) ogImage: BlockOgImage title: (Scalars['String'] | null) __typename: 'Meta' } export interface Mutation { /** * Returns a signed url and an upload url so that you can upload files into your repository. * * Example usage with JavaScript: * ```js * async function handleUpload(file: File) { * const { getUploadSignedURL } = await basehub().mutation({ * getUploadSignedURL: { * __args: { fileName: file.name }, * signedURL: true, * uploadURL: true, * } * }) * * const { signedURL, uploadURL } = getUploadSignedURL * * await fetch(signedURL, { method: 'PUT', body: file }) * * // done! do something with the uploadURL now * } * ``` * */ getUploadSignedURL: GetUploadSignedURL /** Start a job that can be awaited and the result given directly. Under the hood, it runs `transactionAsync` and polls for the result until it is available. You can pass a `timeout` argument, the default being 30_000ms. */ transaction: TransactionStatus /** Start an asynchronous job to mutate BaseHub data. Returns a transaction ID which you can use to get the result of the job. */ transactionAsync: Scalars['String'] transactionStatus: TransactionStatus __typename: 'Mutation' } export interface Newsletter { _analyticsKey: Scalars['String'] _dashboardUrl: Scalars['String'] _id: Scalars['String'] _idPath: Scalars['String'] _slug: Scalars['String'] _slugPath: Scalars['String'] _sys: BlockDocumentSys _title: Scalars['String'] sendNewPost: SendNewPost subscribers: Subscribers __typename: 'Newsletter' } export interface Posts { _analyticsKey: Scalars['String'] _dashboardUrl: Scalars['String'] _id: Scalars['String'] _idPath: Scalars['String'] _meta: ListMeta /** The key used to search from the frontend. */ _searchKey: Scalars['String'] _slug: Scalars['String'] _slugPath: Scalars['String'] _sys: BlockDocumentSys _title: Scalars['String'] /** Returns the first item in the list, or null if the list is empty. Useful when you expect only one result. */ item: (PostsItem | null) /** Returns the list of items after filtering and paginating according to the arguments sent by the client. */ items: PostsItem[] __typename: 'Posts' } export interface PostsItem { _analyticsKey: Scalars['String'] _dashboardUrl: Scalars['String'] _id: Scalars['String'] _idPath: Scalars['String'] _slug: Scalars['String'] _slugPath: Scalars['String'] _sys: BlockDocumentSys _title: Scalars['String'] author: AuthorsItem body: Body coverImage: BlockImage /** ISO 8601 date string. */ date: Scalars['String'] excerpt: Scalars['String'] __typename: 'PostsItem' } export type PostsItemOrderByEnum = '_sys_createdAt__ASC' | '_sys_createdAt__DESC' | '_sys_hash__ASC' | '_sys_hash__DESC' | '_sys_id__ASC' | '_sys_id__DESC' | '_sys_lastModifiedAt__ASC' | '_sys_lastModifiedAt__DESC' | '_sys_slug__ASC' | '_sys_slug__DESC' | '_sys_title__ASC' | '_sys_title__DESC' | 'author__ASC' | 'author__DESC' | 'body__ASC' | 'body__DESC' | 'coverImage__ASC' | 'coverImage__DESC' | 'date__ASC' | 'date__DESC' | 'excerpt__ASC' | 'excerpt__DESC' export interface Query { /** Query across all of the instances of a component. Pass in filters and sorts if you want, and get each instance via the `items` key. */ _componentInstances: _components /** The structure of the repository. Used by START. */ _structure: Scalars['JSON'] _sys: RepoSys blog: Blog meta: Meta newsletter: Newsletter __typename: 'Query' } export interface RepoSys { dashboardUrl: Scalars['String'] forkUrl: Scalars['String'] hash: Scalars['String'] id: Scalars['ID'] playgroundInfo: (_PlaygroundInfo | null) slug: Scalars['String'] title: Scalars['String'] __typename: 'RepoSys' } export type RichTextJson = (BaseRichTextJson | BodyRichText) & { __isUnion?: true } export interface SendNewPost { /** The `webhookSecret` is used to verify the authenticity of the webhook request, and also to type the payload. */ webhookSecret: Scalars['bshb_workflow_218139063'] __typename: 'SendNewPost' } export interface Subscribers { /** The `adminKey` gives clients the ability to query, delete and update this block's data. **It's not meant to be exposed to the public.** */ adminKey: Scalars['bshb_event__530312905'] /** The `ingestKey` gives clients the ability to send new events to this block. Generally, it's safe to expose it to the public. */ ingestKey: Scalars['bshb_event__530312905'] schema: Scalars['BSHBEventSchema'] __typename: 'Subscribers' } export interface TransactionStatus { /** Duration in milliseconds. */ duration: (Scalars['Int'] | null) endedAt: (Scalars['String'] | null) id: Scalars['String'] message: (Scalars['String'] | null) startedAt: Scalars['String'] status: TransactionStatusEnum __typename: 'TransactionStatus' } export type TransactionStatusEnum = 'Cancelled' | 'Completed' | 'Failed' | 'Running' | 'Scheduled' export interface Variant { apiName: Scalars['String'] color: Scalars['String'] id: Scalars['String'] isDefault: Scalars['Boolean'] label: Scalars['String'] __typename: 'Variant' } export interface _PlaygroundInfo { claimUrl: (Scalars['String'] | null) editUrl: Scalars['String'] expiresAt: (Scalars['String'] | null) id: (Scalars['String'] | null) __typename: '_PlaygroundInfo' } export type _ResolveTargetsWithEnum = 'id' | 'objectName' export type _StructureFormatEnum = 'json' | 'xml' export interface _components { authorsItem: authorsItem_AsList postsItem: postsItem_AsList __typename: '_components' } export interface authorsItem_AsList { _analyticsKey: Scalars['String'] _dashboardUrl: Scalars['String'] _id: Scalars['String'] _idPath: Scalars['String'] _meta: ListMeta /** The key used to search from the frontend. */ _searchKey: Scalars['String'] _slug: Scalars['String'] _slugPath: Scalars['String'] _sys: BlockDocumentSys _title: Scalars['String'] /** Returns the first item in the list, or null if the list is empty. Useful when you expect only one result. */ item: (AuthorsItem | null) /** Returns the list of items after filtering and paginating according to the arguments sent by the client. */ items: AuthorsItem[] __typename: 'authorsItem_AsList' } export interface postsItem_AsList { _analyticsKey: Scalars['String'] _dashboardUrl: Scalars['String'] _id: Scalars['String'] _idPath: Scalars['String'] _meta: ListMeta /** The key used to search from the frontend. */ _searchKey: Scalars['String'] _slug: Scalars['String'] _slugPath: Scalars['String'] _sys: BlockDocumentSys _title: Scalars['String'] /** Returns the first item in the list, or null if the list is empty. Useful when you expect only one result. */ item: (PostsItem | null) /** Returns the list of items after filtering and paginating according to the arguments sent by the client. */ items: PostsItem[] __typename: 'postsItem_AsList' } export interface AuthorsGenqlSelection{ _analyticsKey?: { __args: { /** * The scope of the analytics key. Use `send` for just ingesting data. Use `query` if you need to show an analytics data in your website. * * Have in mind, if you expose your `query` analytics key in the frontend, you'll be exposing all of this block's analytics data to the public. This is generally safe, but it might not be in your case. */ scope?: (AnalyticsKeyScope | null)} } | boolean | number _dashboardUrl?: boolean | number _id?: boolean | number _idPath?: boolean | number _meta?: ListMetaGenqlSelection /** The key used to search from the frontend. */ _searchKey?: boolean | number _slug?: boolean | number _slugPath?: boolean | number _sys?: BlockDocumentSysGenqlSelection _title?: boolean | number /** Returns the first item in the list, or null if the list is empty. Useful when you expect only one result. */ item?: AuthorsItemGenqlSelection /** Returns the list of items after filtering and paginating according to the arguments sent by the client. */ items?: AuthorsItemGenqlSelection __typename?: boolean | number } export interface AuthorsItemGenqlSelection{ _analyticsKey?: { __args: { /** * The scope of the analytics key. Use `send` for just ingesting data. Use `query` if you need to show an analytics data in your website. * * Have in mind, if you expose your `query` analytics key in the frontend, you'll be exposing all of this block's analytics data to the public. This is generally safe, but it might not be in your case. */ scope?: (AnalyticsKeyScope | null)} } | boolean | number _dashboardUrl?: boolean | number _id?: boolean | number _idPath?: boolean | number _slug?: boolean | number _slugPath?: boolean | number _sys?: BlockDocumentSysGenqlSelection _title?: boolean | number avatar?: BlockImageGenqlSelection __typename?: boolean | number } export interface AuthorsItemFilterInput {AND?: (AuthorsItemFilterInput | null),OR?: (AuthorsItemFilterInput | null),_id?: (StringFilter | null),_slug?: (StringFilter | null),_sys_apiNamePath?: (StringFilter | null),_sys_createdAt?: (DateFilter | null),_sys_hash?: (StringFilter | null),_sys_id?: (StringFilter | null),_sys_idPath?: (StringFilter | null),_sys_lastModifiedAt?: (DateFilter | null),_sys_slug?: (StringFilter | null),_sys_slugPath?: (StringFilter | null),_sys_title?: (StringFilter | null),_title?: (StringFilter | null)} export interface BaseRichTextJsonGenqlSelection{ blocks?: boolean | number content?: boolean | number toc?: boolean | number __typename?: boolean | number } export interface BlockAudioGenqlSelection{ /** The duration of the audio in seconds. If the duration is not available, it will be estimated based on the file size. */ duration?: boolean | number fileName?: boolean | number fileSize?: boolean | number lastModified?: boolean | number mimeType?: boolean | number url?: boolean | number __typename?: boolean | number } export interface BlockCodeSnippetGenqlSelection{ allowedLanguages?: boolean | number code?: boolean | number /** @deprecated Figuring out the correct api. */ html?: { __args: { /** Theme for the code snippet */ theme?: (Scalars['String'] | null)} } | boolean | number language?: boolean | number __typename?: boolean | number } export interface BlockColorGenqlSelection{ b?: boolean | number g?: boolean | number hex?: boolean | number hsl?: boolean | number r?: boolean | number rgb?: boolean | number __typename?: boolean | number } export interface BlockDocumentGenqlSelection{ _analyticsKey?: { __args: { /** * The scope of the analytics key. Use `send` for just ingesting data. Use `query` if you need to show an analytics data in your website. * * Have in mind, if you expose your `query` analytics key in the frontend, you'll be exposing all of this block's analytics data to the public. This is generally safe, but it might not be in your case. */ scope?: (AnalyticsKeyScope | null)} } | boolean | number _dashboardUrl?: boolean | number _id?: boolean | number _idPath?: boolean | number _slug?: boolean | number _slugPath?: boolean | number _sys?: BlockDocumentSysGenqlSelection _title?: boolean | number on_Authors?: AuthorsGenqlSelection on_AuthorsItem?: AuthorsItemGenqlSelection on_Blog?: BlogGenqlSelection on_Meta?: MetaGenqlSelection on_Newsletter?: NewsletterGenqlSelection on_Posts?: PostsGenqlSelection on_PostsItem?: PostsItemGenqlSelection on_authorsItem_AsList?: authorsItem_AsListGenqlSelection on_postsItem_AsList?: postsItem_AsListGenqlSelection __typename?: boolean | number } export interface BlockDocumentSysGenqlSelection{ apiNamePath?: boolean | number createdAt?: boolean | number hash?: boolean | number id?: boolean | number idPath?: boolean | number lastModifiedAt?: boolean | number slug?: boolean | number slugPath?: boolean | number title?: boolean | number __typename?: boolean | number } export interface BlockFileGenqlSelection{ fileName?: boolean | number fileSize?: boolean | number lastModified?: boolean | number mimeType?: boolean | number url?: boolean | number __typename?: boolean | number } export interface BlockImageGenqlSelection{ alt?: boolean | number aspectRatio?: boolean | number blurDataURL?: boolean | number fileName?: boolean | number fileSize?: boolean | number height?: boolean | number lastModified?: boolean | number mimeType?: boolean | number /** @deprecated Renamed to `blurDataURL` to match Next.js Image's naming convention. */ placeholderURL?: boolean | number /** @deprecated Use `url` instead. */ rawUrl?: boolean | number thumbhash?: boolean | number /** * This field is used to generate the image URL with the provided options. The options are passed as arguments. For example, if you want to resize the image to 200x200 pixels, you can use the following query: * * ```graphql * { * imageBlock { * url(width: 200, height: 200) * } * } * ``` * * This will return the URL with the width and height set to 200 pixels. * * BaseHub uses Cloudflare for image resizing. Check out [all available options in their docs](https://developers.cloudflare.com/images/transform-images/transform-via-workers/#fetch-options). * */ url?: { __args: {anim?: (Scalars['String'] | null), background?: (Scalars['String'] | null), blur?: (Scalars['Int'] | null), border?: (Scalars['String'] | null), brightness?: (Scalars['Int'] | null), compression?: (Scalars['String'] | null), contrast?: (Scalars['Int'] | null), dpr?: (Scalars['Int'] | null), fit?: (Scalars['String'] | null), format?: (Scalars['String'] | null), gamma?: (Scalars['String'] | null), gravity?: (Scalars['String'] | null), height?: (Scalars['Int'] | null), metadata?: (Scalars['String'] | null), quality?: (Scalars['Int'] | null), rotate?: (Scalars['String'] | null), sharpen?: (Scalars['String'] | null), trim?: (Scalars['String'] | null), width?: (Scalars['Int'] | null)} } | boolean | number width?: boolean | number __typename?: boolean | number } export interface BlockListGenqlSelection{ _analyticsKey?: { __args: { /** * The scope of the analytics key. Use `send` for just ingesting data. Use `query` if you need to show an analytics data in your website. * * Have in mind, if you expose your `query` analytics key in the frontend, you'll be exposing all of this block's analytics data to the public. This is generally safe, but it might not be in your case. */ scope?: (AnalyticsKeyScope | null)} } | boolean | number _dashboardUrl?: boolean | number _id?: boolean | number _idPath?: boolean | number _meta?: ListMetaGenqlSelection /** The key used to search from the frontend. */ _searchKey?: boolean | number _slug?: boolean | number _slugPath?: boolean | number _sys?: BlockDocumentSysGenqlSelection _title?: boolean | number on_Authors?: AuthorsGenqlSelection on_Posts?: PostsGenqlSelection on_authorsItem_AsList?: authorsItem_AsListGenqlSelection on_postsItem_AsList?: postsItem_AsListGenqlSelection __typename?: boolean | number } export interface BlockOgImageGenqlSelection{ height?: boolean | number url?: boolean | number width?: boolean | number __typename?: boolean | number } /** Rich text block */ export interface BlockRichTextGenqlSelection{ html?: { __args: { /** It automatically generates a unique id for each heading present in the HTML. Enabled by default. */ slugs?: (Scalars['Boolean'] | null), /** Inserts a table of contents at the beginning of the HTML. */ toc?: (Scalars['Boolean'] | null)} } | boolean | number json?: RichTextJsonGenqlSelection markdown?: boolean | number plainText?: boolean | number readingTime?: { __args: { /** Words per minute, defaults to average 183wpm */ wpm?: (Scalars['Int'] | null)} } | boolean | number on_Body?: BodyGenqlSelection __typename?: boolean | number } export interface BlockVideoGenqlSelection{ aspectRatio?: boolean | number /** The duration of the video in seconds. If the duration is not available, it will be estimated based on the file size. */ duration?: boolean | number fileName?: boolean | number fileSize?: boolean | number height?: boolean | number lastModified?: boolean | number mimeType?: boolean | number url?: boolean | number width?: boolean | number __typename?: boolean | number } export interface BlogGenqlSelection{ _analyticsKey?: { __args: { /** * The scope of the analytics key. Use `send` for just ingesting data. Use `query` if you need to show an analytics data in your website. * * Have in mind, if you expose your `query` analytics key in the frontend, you'll be exposing all of this block's analytics data to the public. This is generally safe, but it might not be in your case. */ scope?: (AnalyticsKeyScope | null)} } | boolean | number _dashboardUrl?: boolean | number _id?: boolean | number _idPath?: boolean | number _slug?: boolean | number _slugPath?: boolean | number _sys?: BlockDocumentSysGenqlSelection _title?: boolean | number authors?: (AuthorsGenqlSelection & { __args?: { /** Filter by a field. */ filter?: (AuthorsItemFilterInput | null), /** Limit the number of items returned. Defaults to 500. */ first?: (Scalars['Int'] | null), /** Order by a field. */ orderBy?: (AuthorsItemOrderByEnum | null), /** Skip the first n items. */ skip?: (Scalars['Int'] | null)} }) morePosts?: boolean | number posts?: (PostsGenqlSelection & { __args?: { /** Filter by a field. */ filter?: (PostsItemFilterInput | null), /** Limit the number of items returned. Defaults to 500. */ first?: (Scalars['Int'] | null), /** Order by a field. */ orderBy?: (PostsItemOrderByEnum | null), /** Skip the first n items. */ skip?: (Scalars['Int'] | null)} }) __typename?: boolean | number } export interface BodyGenqlSelection{ html?: { __args: { /** It automatically generates a unique id for each heading present in the HTML. Enabled by default. */ slugs?: (Scalars['Boolean'] | null), /** Inserts a table of contents at the beginning of the HTML. */ toc?: (Scalars['Boolean'] | null)} } | boolean | number json?: BodyRichTextGenqlSelection markdown?: boolean | number plainText?: boolean | number readingTime?: { __args: { /** Words per minute, defaults to average 183wpm */ wpm?: (Scalars['Int'] | null)} } | boolean | number __typename?: boolean | number } export interface BodyRichTextGenqlSelection{ content?: boolean | number toc?: boolean | number __typename?: boolean | number } export interface DateFilter {eq?: (Scalars['DateTime'] | null),isAfter?: (Scalars['DateTime'] | null),isBefore?: (Scalars['DateTime'] | null),isNull?: (Scalars['Boolean'] | null),neq?: (Scalars['DateTime'] | null),onOrAfter?: (Scalars['DateTime'] | null),onOrBefore?: (Scalars['DateTime'] | null)} export interface GetUploadSignedURLGenqlSelection{ signedURL?: boolean | number uploadURL?: boolean | number __typename?: boolean | number } export interface ListFilter {isEmpty?: (Scalars['Boolean'] | null),length?: (Scalars['Int'] | null)} export interface ListMetaGenqlSelection{ /** Number of items after applying filters but before pagination */ filteredCount?: boolean | number /** Total number of items in collection before any filtering/pagination */ totalCount?: boolean | number __typename?: boolean | number } export interface MediaBlockGenqlSelection{ fileName?: boolean | number fileSize?: boolean | number lastModified?: boolean | number mimeType?: boolean | number url?: boolean | number on_BlockAudio?: BlockAudioGenqlSelection on_BlockFile?: BlockFileGenqlSelection on_BlockImage?: BlockImageGenqlSelection on_BlockVideo?: BlockVideoGenqlSelection __typename?: boolean | number } export interface MediaBlockUnionGenqlSelection{ on_BlockAudio?:BlockAudioGenqlSelection, on_BlockFile?:BlockFileGenqlSelection, on_BlockImage?:BlockImageGenqlSelection, on_BlockVideo?:BlockVideoGenqlSelection, on_MediaBlock?: MediaBlockGenqlSelection, __typename?: boolean | number } export interface MetaGenqlSelection{ _analyticsKey?: { __args: { /** * The scope of the analytics key. Use `send` for just ingesting data. Use `query` if you need to show an analytics data in your website. * * Have in mind, if you expose your `query` analytics key in the frontend, you'll be exposing all of this block's analytics data to the public. This is generally safe, but it might not be in your case. */ scope?: (AnalyticsKeyScope | null)} } | boolean | number _dashboardUrl?: boolean | number _id?: boolean | number _idPath?: boolean | number _slug?: boolean | number _slugPath?: boolean | number _sys?: BlockDocumentSysGenqlSelection _title?: boolean | number description?: boolean | number ogImage?: BlockOgImageGenqlSelection title?: boolean | number __typename?: boolean | number } export interface MutationGenqlSelection{ /** * Returns a signed url and an upload url so that you can upload files into your repository. * * Example usage with JavaScript: * ```js * async function handleUpload(file: File) { * const { getUploadSignedURL } = await basehub().mutation({ * getUploadSignedURL: { * __args: { fileName: file.name }, * signedURL: true, * uploadURL: true, * } * }) * * const { signedURL, uploadURL } = getUploadSignedURL * * await fetch(signedURL, { method: 'PUT', body: file }) * * // done! do something with the uploadURL now * } * ``` * */ getUploadSignedURL?: (GetUploadSignedURLGenqlSelection & { __args: { /** SHA256 hash of the file. Used for reusing existing files. */ fileHash?: (Scalars['String'] | null), /** The file name */ fileName: Scalars['String']} }) /** Start a job that can be awaited and the result given directly. Under the hood, it runs `transactionAsync` and polls for the result until it is available. You can pass a `timeout` argument, the default being 30_000ms. */ transaction?: (TransactionStatusGenqlSelection & { __args: { /** Auto make a commit in your Repo with the specified message. */ autoCommit?: (Scalars['String'] | null), /** Transaction data. */ data: Scalars['String'], /** Skip running workflows and event subscribers. Defaults to false. */ skipWorkflows?: (Scalars['Boolean'] | null), /** Timeout in milliseconds. */ timeout?: (Scalars['Int'] | null)} }) /** Start an asynchronous job to mutate BaseHub data. Returns a transaction ID which you can use to get the result of the job. */ transactionAsync?: { __args: { /** Auto make a commit in your Repo with the specified message. */ autoCommit?: (Scalars['String'] | null), /** Transaction data. */ data: Scalars['String'], /** Skip running workflows and event subscribers. Defaults to false. */ skipWorkflows?: (Scalars['Boolean'] | null)} } transactionStatus?: (TransactionStatusGenqlSelection & { __args: { /** Transaction ID */ id: Scalars['String']} }) __typename?: boolean | number } export interface NewsletterGenqlSelection{ _analyticsKey?: { __args: { /** * The scope of the analytics key. Use `send` for just ingesting data. Use `query` if you need to show an analytics data in your website. * * Have in mind, if you expose your `query` analytics key in the frontend, you'll be exposing all of this block's analytics data to the public. This is generally safe, but it might not be in your case. */ scope?: (AnalyticsKeyScope | null)} } | boolean | number _dashboardUrl?: boolean | number _id?: boolean | number _idPath?: boolean | number _slug?: boolean | number _slugPath?: boolean | number _sys?: BlockDocumentSysGenqlSelection _title?: boolean | number sendNewPost?: SendNewPostGenqlSelection subscribers?: SubscribersGenqlSelection __typename?: boolean | number } export interface NumberFilter {eq?: (Scalars['Float'] | null),gt?: (Scalars['Float'] | null),gte?: (Scalars['Float'] | null),isNull?: (Scalars['Boolean'] | null),lt?: (Scalars['Float'] | null),lte?: (Scalars['Float'] | null),neq?: (Scalars['Float'] | null)} export interface PostsGenqlSelection{ _analyticsKey?: { __args: { /** * The scope of the analytics key. Use `send` for just ingesting data. Use `query` if you need to show an analytics data in your website. * * Have in mind, if you expose your `query` analytics key in the frontend, you'll be exposing all of this block's analytics data to the public. This is generally safe, but it might not be in your case. */ scope?: (AnalyticsKeyScope | null)} } | boolean | number _dashboardUrl?: boolean | number _id?: boolean | number _idPath?: boolean | number _meta?: ListMetaGenqlSelection /** The key used to search from the frontend. */ _searchKey?: boolean | number _slug?: boolean | number _slugPath?: boolean | number _sys?: BlockDocumentSysGenqlSelection _title?: boolean | number /** Returns the first item in the list, or null if the list is empty. Useful when you expect only one result. */ item?: PostsItemGenqlSelection /** Returns the list of items after filtering and paginating according to the arguments sent by the client. */ items?: PostsItemGenqlSelection __typename?: boolean | number } export interface PostsItemGenqlSelection{ _analyticsKey?: { __args: { /** * The scope of the analytics key. Use `send` for just ingesting data. Use `query` if you need to show an analytics data in your website. * * Have in mind, if you expose your `query` analytics key in the frontend, you'll be exposing all of this block's analytics data to the public. This is generally safe, but it might not be in your case. */ scope?: (AnalyticsKeyScope | null)} } | boolean | number _dashboardUrl?: boolean | number _id?: boolean | number _idPath?: boolean | number _slug?: boolean | number _slugPath?: boolean | number _sys?: BlockDocumentSysGenqlSelection _title?: boolean | number author?: AuthorsItemGenqlSelection body?: BodyGenqlSelection coverImage?: BlockImageGenqlSelection /** ISO 8601 date string. */ date?: boolean | number excerpt?: boolean | number __typename?: boolean | number } export interface PostsItemFilterInput {AND?: (PostsItemFilterInput | null),OR?: (PostsItemFilterInput | null),_id?: (StringFilter | null),_slug?: (StringFilter | null),_sys_apiNamePath?: (StringFilter | null),_sys_createdAt?: (DateFilter | null),_sys_hash?: (StringFilter | null),_sys_id?: (StringFilter | null),_sys_idPath?: (StringFilter | null),_sys_lastModifiedAt?: (DateFilter | null),_sys_slug?: (StringFilter | null),_sys_slugPath?: (StringFilter | null),_sys_title?: (StringFilter | null),_title?: (StringFilter | null),author?: (PostsItemFilterInput__author_0___untitled | null),date?: (DateFilter | null),excerpt?: (StringFilter | null)} export interface PostsItemFilterInput__author_0___untitled {_id?: (StringFilter | null),_slug?: (StringFilter | null),_sys_apiNamePath?: (StringFilter | null),_sys_createdAt?: (DateFilter | null),_sys_hash?: (StringFilter | null),_sys_id?: (StringFilter | null),_sys_idPath?: (StringFilter | null),_sys_lastModifiedAt?: (DateFilter | null),_sys_slug?: (StringFilter | null),_sys_slugPath?: (StringFilter | null),_sys_title?: (StringFilter | null),_title?: (StringFilter | null)} export interface QueryGenqlSelection{ /** Query across all of the instances of a component. Pass in filters and sorts if you want, and get each instance via the `items` key. */ _componentInstances?: _componentsGenqlSelection /** The structure of the repository. Used by START. */ _structure?: { __args: { /** The format of the structure. */ format?: (_StructureFormatEnum | null), /** The format of the structure. */ resolveTargetsWith?: (_ResolveTargetsWithEnum | null), /** A target block to forcefully resolve in the schema. */ targetBlock?: (TargetBlock | null), /** Whether to include constraints in the structure. */ withConstraints?: (Scalars['Boolean'] | null), /** Whether to include IDs in the structure. */ withIDs?: (Scalars['Boolean'] | null), /** Whether to include type options in the structure. */ withTypeOptions?: (Scalars['Boolean'] | null)} } | boolean | number _sys?: RepoSysGenqlSelection blog?: BlogGenqlSelection meta?: MetaGenqlSelection newsletter?: NewsletterGenqlSelection __typename?: boolean | number } export interface RepoSysGenqlSelection{ dashboardUrl?: boolean | number forkUrl?: boolean | number hash?: boolean | number id?: boolean | number playgroundInfo?: _PlaygroundInfoGenqlSelection slug?: boolean | number title?: boolean | number __typename?: boolean | number } export interface RichTextJsonGenqlSelection{ content?: boolean | number toc?: boolean | number on_BaseRichTextJson?: BaseRichTextJsonGenqlSelection on_BodyRichText?: BodyRichTextGenqlSelection __typename?: boolean | number } export interface SelectFilter {excludes?: (Scalars['String'] | null),excludesAll?: (Scalars['String'][] | null),includes?: (Scalars['String'] | null),includesAll?: (Scalars['String'][] | null),includesAny?: (Scalars['String'][] | null),isEmpty?: (Scalars['Boolean'] | null)} export interface SendNewPostGenqlSelection{ /** The `webhookSecret` is used to verify the authenticity of the webhook request, and also to type the payload. */ webhookSecret?: boolean | number __typename?: boolean | number } export interface StringFilter {contains?: (Scalars['String'] | null),endsWith?: (Scalars['String'] | null),eq?: (Scalars['String'] | null),isNull?: (Scalars['Boolean'] | null),matches?: (StringMatchesFilter | null),notEq?: (Scalars['String'] | null),startsWith?: (Scalars['String'] | null)} export interface StringMatchesFilter {caseSensitive?: (Scalars['Boolean'] | null),pattern: Scalars['String']} export interface SubscribersGenqlSelection{ /** The `adminKey` gives clients the ability to query, delete and update this block's data. **It's not meant to be exposed to the public.** */ adminKey?: boolean | number /** The `ingestKey` gives clients the ability to send new events to this block. Generally, it's safe to expose it to the public. */ ingestKey?: boolean | number schema?: boolean | number __typename?: boolean | number } export interface TargetBlock {focus?: (Scalars['Boolean'] | null),id: Scalars['String'],label: Scalars['String']} export interface TransactionStatusGenqlSelection{ /** Duration in milliseconds. */ duration?: boolean | number endedAt?: boolean | number id?: boolean | number message?: boolean | number startedAt?: boolean | number status?: boolean | number __typename?: boolean | number } export interface VariantGenqlSelection{ apiName?: boolean | number color?: boolean | number id?: boolean | number isDefault?: boolean | number label?: boolean | number __typename?: boolean | number } export interface _PlaygroundInfoGenqlSelection{ claimUrl?: boolean | number editUrl?: boolean | number expiresAt?: boolean | number id?: boolean | number __typename?: boolean | number } export interface _componentsGenqlSelection{ authorsItem?: (authorsItem_AsListGenqlSelection & { __args?: { /** Filter by a field. */ filter?: (AuthorsItemFilterInput | null), /** Limit the number of items returned. Defaults to 500. */ first?: (Scalars['Int'] | null), /** Order by a field. */ orderBy?: (AuthorsItemOrderByEnum | null), /** Skip the first n items. */ skip?: (Scalars['Int'] | null)} }) postsItem?: (postsItem_AsListGenqlSelection & { __args?: { /** Filter by a field. */ filter?: (PostsItemFilterInput | null), /** Limit the number of items returned. Defaults to 500. */ first?: (Scalars['Int'] | null), /** Order by a field. */ orderBy?: (PostsItemOrderByEnum | null), /** Skip the first n items. */ skip?: (Scalars['Int'] | null)} }) __typename?: boolean | number } export interface authorsItem_AsListGenqlSelection{ _analyticsKey?: { __args: { /** * The scope of the analytics key. Use `send` for just ingesting data. Use `query` if you need to show an analytics data in your website. * * Have in mind, if you expose your `query` analytics key in the frontend, you'll be exposing all of this block's analytics data to the public. This is generally safe, but it might not be in your case. */ scope?: (AnalyticsKeyScope | null)} } | boolean | number _dashboardUrl?: boolean | number _id?: boolean | number _idPath?: boolean | number _meta?: ListMetaGenqlSelection /** The key used to search from the frontend. */ _searchKey?: boolean | number _slug?: boolean | number _slugPath?: boolean | number _sys?: BlockDocumentSysGenqlSelection _title?: boolean | number /** Returns the first item in the list, or null if the list is empty. Useful when you expect only one result. */ item?: AuthorsItemGenqlSelection /** Returns the list of items after filtering and paginating according to the arguments sent by the client. */ items?: AuthorsItemGenqlSelection __typename?: boolean | number } export interface postsItem_AsListGenqlSelection{ _analyticsKey?: { __args: { /** * The scope of the analytics key. Use `send` for just ingesting data. Use `query` if you need to show an analytics data in your website. * * Have in mind, if you expose your `query` analytics key in the frontend, you'll be exposing all of this block's analytics data to the public. This is generally safe, but it might not be in your case. */ scope?: (AnalyticsKeyScope | null)} } | boolean | number _dashboardUrl?: boolean | number _id?: boolean | number _idPath?: boolean | number _meta?: ListMetaGenqlSelection /** The key used to search from the frontend. */ _searchKey?: boolean | number _slug?: boolean | number _slugPath?: boolean | number _sys?: BlockDocumentSysGenqlSelection _title?: boolean | number /** Returns the first item in the list, or null if the list is empty. Useful when you expect only one result. */ item?: PostsItemGenqlSelection /** Returns the list of items after filtering and paginating according to the arguments sent by the client. */ items?: PostsItemGenqlSelection __typename?: boolean | number } export interface FragmentsMap { Authors: { root: Authors, selection: AuthorsGenqlSelection, } AuthorsItem: { root: AuthorsItem, selection: AuthorsItemGenqlSelection, } BaseRichTextJson: { root: BaseRichTextJson, selection: BaseRichTextJsonGenqlSelection, } BlockAudio: { root: BlockAudio, selection: BlockAudioGenqlSelection, } BlockCodeSnippet: { root: BlockCodeSnippet, selection: BlockCodeSnippetGenqlSelection, } BlockColor: { root: BlockColor, selection: BlockColorGenqlSelection, } BlockDocument: { root: BlockDocument, selection: BlockDocumentGenqlSelection, } BlockDocumentSys: { root: BlockDocumentSys, selection: BlockDocumentSysGenqlSelection, } BlockFile: { root: BlockFile, selection: BlockFileGenqlSelection, } BlockImage: { root: BlockImage, selection: BlockImageGenqlSelection, } BlockList: { root: BlockList, selection: BlockListGenqlSelection, } BlockOgImage: { root: BlockOgImage, selection: BlockOgImageGenqlSelection, } BlockRichText: { root: BlockRichText, selection: BlockRichTextGenqlSelection, } BlockVideo: { root: BlockVideo, selection: BlockVideoGenqlSelection, } Blog: { root: Blog, selection: BlogGenqlSelection, } Body: { root: Body, selection: BodyGenqlSelection, } BodyRichText: { root: BodyRichText, selection: BodyRichTextGenqlSelection, } GetUploadSignedURL: { root: GetUploadSignedURL, selection: GetUploadSignedURLGenqlSelection, } ListMeta: { root: ListMeta, selection: ListMetaGenqlSelection, } MediaBlock: { root: MediaBlock, selection: MediaBlockGenqlSelection, } Meta: { root: Meta, selection: MetaGenqlSelection, } Mutation: { root: Mutation, selection: MutationGenqlSelection, } Newsletter: { root: Newsletter, selection: NewsletterGenqlSelection, } Posts: { root: Posts, selection: PostsGenqlSelection, } PostsItem: { root: PostsItem, selection: PostsItemGenqlSelection, } Query: { root: Query, selection: QueryGenqlSelection, } RepoSys: { root: RepoSys, selection: RepoSysGenqlSelection, } RichTextJson: { root: RichTextJson, selection: RichTextJsonGenqlSelection, } SendNewPost: { root: SendNewPost, selection: SendNewPostGenqlSelection, } Subscribers: { root: Subscribers, selection: SubscribersGenqlSelection, } TransactionStatus: { root: TransactionStatus, selection: TransactionStatusGenqlSelection, } Variant: { root: Variant, selection: VariantGenqlSelection, } _PlaygroundInfo: { root: _PlaygroundInfo, selection: _PlaygroundInfoGenqlSelection, } _components: { root: _components, selection: _componentsGenqlSelection, } authorsItem_AsList: { root: authorsItem_AsList, selection: authorsItem_AsListGenqlSelection, } postsItem_AsList: { root: postsItem_AsList, selection: postsItem_AsListGenqlSelection, } } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isMerged="true" "use client" import * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" const Accordion = AccordionPrimitive.Root const AccordionItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AccordionItem.displayName = "AccordionItem" const AccordionTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( svg]:rotate-180", className )} {...props} > {children} )) AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName const AccordionContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => (

{children}

)) AccordionContent.displayName = AccordionPrimitive.Content.displayName export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true" "use client" import * as React from "react" import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" const AlertDialog = AlertDialogPrimitive.Root const AlertDialogTrigger = AlertDialogPrimitive.Trigger const AlertDialogPortal = AlertDialogPrimitive.Portal const AlertDialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName const AlertDialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogHeader.displayName = "AlertDialogHeader" const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogFooter.displayName = "AlertDialogFooter" const AlertDialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName const AlertDialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName const AlertDialogAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName const AlertDialogCancel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, } ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

)) Alert.displayName = "Alert" const AlertTitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true" "use client" import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" const AspectRatio = AspectRatioPrimitive.Root export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, } ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return (
) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" const Breadcrumb = React.forwardRef< HTMLElement, React.ComponentPropsWithoutRef<"nav"> & { separator?: React.ReactNode } >(({ ...props }, ref) =>
) Breadcrumb.displayName = "Breadcrumb" const BreadcrumbList = React.forwardRef< HTMLOListElement, React.ComponentPropsWithoutRef<"ol"> >(({ className, ...props }, ref) => (
)) BreadcrumbList.displayName = "BreadcrumbList" const BreadcrumbItem = React.forwardRef< HTMLLIElement, React.ComponentPropsWithoutRef<"li"> >(({ className, ...props }, ref) => (
)) BreadcrumbItem.displayName = "BreadcrumbItem" const BreadcrumbLink = React.forwardRef< HTMLAnchorElement, React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean } >(({ asChild, className, ...props }, ref) => { const Comp = asChild ? Slot : "a" return ( ) }) BreadcrumbLink.displayName = "BreadcrumbLink" const BreadcrumbPage = React.forwardRef< HTMLSpanElement, React.ComponentPropsWithoutRef<"span"> >(({ className, ...props }, ref) => ( )) BreadcrumbPage.displayName = "BreadcrumbPage" const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
) BreadcrumbSeparator.displayName = "BreadcrumbSeparator" const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => ( ) BreadcrumbEllipsis.displayName = "BreadcrumbElipssis" export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true" "use client" import * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { DayPicker } from "react-day-picker" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" export type CalendarProps = React.ComponentProps function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { return ( , IconRight: ({ ...props }) => , }} {...props} /> ) } Calendar.displayName = "Calendar" export { Calendar } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) Card.displayName = "Card" const CardHeader = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/carousel.tsx" isMerged="true" "use client" import * as React from "react" import useEmblaCarousel, { type UseEmblaCarouselType, } from "embla-carousel-react" import { ArrowLeft, ArrowRight } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" type CarouselApi = UseEmblaCarouselType[1] type UseCarouselParameters = Parameters type CarouselOptions = UseCarouselParameters[0] type CarouselPlugin = UseCarouselParameters[1] type CarouselProps = { opts?: CarouselOptions plugins?: CarouselPlugin orientation?: "horizontal" | "vertical" setApi?: (api: CarouselApi) => void } type CarouselContextProps = { carouselRef: ReturnType[0] api: ReturnType[1] scrollPrev: () => void scrollNext: () => void canScrollPrev: boolean canScrollNext: boolean } & CarouselProps const CarouselContext = React.createContext(null) function useCarousel() { const context = React.useContext(CarouselContext) if (!context) { throw new Error("useCarousel must be used within a ") } return context } const Carousel = React.forwardRef< HTMLDivElement, React.HTMLAttributes & CarouselProps >( ( { orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref ) => { const [carouselRef, api] = useEmblaCarousel( { ...opts, axis: orientation === "horizontal" ? "x" : "y", }, plugins ) const [canScrollPrev, setCanScrollPrev] = React.useState(false) const [canScrollNext, setCanScrollNext] = React.useState(false) const onSelect = React.useCallback((api: CarouselApi) => { if (!api) { return } setCanScrollPrev(api.canScrollPrev()) setCanScrollNext(api.canScrollNext()) }, []) const scrollPrev = React.useCallback(() => { api?.scrollPrev() }, [api]) const scrollNext = React.useCallback(() => { api?.scrollNext() }, [api]) const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (event.key === "ArrowLeft") { event.preventDefault() scrollPrev() } else if (event.key === "ArrowRight") { event.preventDefault() scrollNext() } }, [scrollPrev, scrollNext] ) React.useEffect(() => { if (!api || !setApi) { return } setApi(api) }, [api, setApi]) React.useEffect(() => { if (!api) { return } onSelect(api) api.on("reInit", onSelect) api.on("select", onSelect) return () => { api?.off("select", onSelect) } }, [api, onSelect]) return (
{children}
) } ) Carousel.displayName = "Carousel" const CarouselContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { carouselRef, orientation } = useCarousel() return (

) }) CarouselContent.displayName = "CarouselContent" const CarouselItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { orientation } = useCarousel() return (
) }) CarouselItem.displayName = "CarouselItem" const CarouselPrevious = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = "outline", size = "icon", ...props }, ref) => { const { orientation, scrollPrev, canScrollPrev } = useCarousel() return ( ) }) CarouselPrevious.displayName = "CarouselPrevious" const CarouselNext = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = "outline", size = "icon", ...props }, ref) => { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) }) CarouselNext.displayName = "CarouselNext" export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true" "use client" import * as React from "react" import * as RechartsPrimitive from "recharts" import { cn } from "@/lib/utils" // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error("useChart must be used within a ") } return context } const ChartContainer = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"] } >(({ id, className, children, config, ...props }, ref) => { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, "")}` return (
{children}
) }) ChartContainer.displayName = "Chart" const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([_, config]) => config.theme || config.color ) if (!colorConfig.length) { return null } return (