8f:I[903690,["/chat-static/_next/static/immutable/chunks/1m0r1037wq98k.js","/chat-static/_next/static/immutable/chunks/13zdzqwus9umo.js","/chat-static/_next/static/immutable/chunks/1iev77wu-3vp1.js","/chat-static/_next/static/immutable/chunks/1ahdf609w04k2.js","/chat-static/_next/static/immutable/chunks/0txvwiui0hemn.js","/chat-static/_next/static/immutable/chunks/03u2jmu4jy3d7.js","/chat-static/_next/static/immutable/chunks/3kwwr0j-u86g_.js","/chat-static/_next/static/immutable/chunks/1ijhokb2v0d74.js","/chat-static/_next/static/immutable/chunks/4484t2g2wpft0.js","/chat-static/_next/static/immutable/chunks/3vry8986kzla3.js","/chat-static/_next/static/immutable/chunks/1bj9qwnsgeuib.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3fas7hkw8i4rc.js","/chat-static/_next/static/immutable/chunks/0zosk-qr7dt38.js","/chat-static/_next/static/immutable/chunks/0-lamd0oomsmg.js","/chat-static/_next/static/immutable/chunks/2qw49u6pjx6z-.js","/chat-static/_next/static/immutable/chunks/3fv1_3qe-b0fe.js","/chat-static/_next/static/immutable/chunks/1kggp_hh1wtg-.js","/chat-static/_next/static/immutable/chunks/2v4ca2ca54exm.js","/chat-static/_next/static/immutable/chunks/2sr86dn27j-z2.js","/chat-static/_next/static/immutable/chunks/3ec-g0nfe85s4.js","/chat-static/_next/static/immutable/chunks/02wgyksxmqdo9.js","/chat-static/_next/static/immutable/chunks/0jn2zliwqegp6.js","/chat-static/_next/static/immutable/chunks/0ps1qzh1nk6d-.js","/chat-static/_next/static/immutable/chunks/3968nzrjvd6wq.js","/chat-static/_next/static/immutable/chunks/1i2vjdx8kghud.js","/chat-static/_next/static/immutable/chunks/1k-jhipmqjyex.js","/chat-static/_next/static/immutable/chunks/1qm45i0y1ksq_.js","/chat-static/_next/static/immutable/chunks/1eik28lj_d79q.js","/chat-static/_next/static/immutable/chunks/0batqcj2db5tx.js","/chat-static/_next/static/immutable/chunks/22q80h5vljxme.js","/chat-static/_next/static/immutable/chunks/32f_xa0asusa0.js","/chat-static/_next/static/immutable/chunks/17-b0dujr-h8t.js","/chat-static/_next/static/immutable/chunks/0ttugpgpljuh_.js","/chat-static/_next/static/immutable/chunks/2bwf0nopjvnf1.js","/chat-static/_next/static/immutable/chunks/2mz9q5bdln3xq.js","/chat-static/_next/static/immutable/chunks/069x4vtgu4fpq.js","/chat-static/_next/static/immutable/chunks/0_h5jt2xwz8a-.js","/chat-static/_next/static/immutable/chunks/34q85al3g00t2.js"],"ExplicitChatIdProvider"] 90:I[838238,["/chat-static/_next/static/immutable/chunks/1m0r1037wq98k.js","/chat-static/_next/static/immutable/chunks/13zdzqwus9umo.js","/chat-static/_next/static/immutable/chunks/1iev77wu-3vp1.js","/chat-static/_next/static/immutable/chunks/1ahdf609w04k2.js","/chat-static/_next/static/immutable/chunks/0txvwiui0hemn.js","/chat-static/_next/static/immutable/chunks/03u2jmu4jy3d7.js","/chat-static/_next/static/immutable/chunks/3kwwr0j-u86g_.js","/chat-static/_next/static/immutable/chunks/1ijhokb2v0d74.js","/chat-static/_next/static/immutable/chunks/4484t2g2wpft0.js","/chat-static/_next/static/immutable/chunks/3vry8986kzla3.js","/chat-static/_next/static/immutable/chunks/1bj9qwnsgeuib.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3fas7hkw8i4rc.js","/chat-static/_next/static/immutable/chunks/0zosk-qr7dt38.js","/chat-static/_next/static/immutable/chunks/0-lamd0oomsmg.js","/chat-static/_next/static/immutable/chunks/2qw49u6pjx6z-.js","/chat-static/_next/static/immutable/chunks/3fv1_3qe-b0fe.js","/chat-static/_next/static/immutable/chunks/1kggp_hh1wtg-.js","/chat-static/_next/static/immutable/chunks/2v4ca2ca54exm.js","/chat-static/_next/static/immutable/chunks/2sr86dn27j-z2.js","/chat-static/_next/static/immutable/chunks/3ec-g0nfe85s4.js","/chat-static/_next/static/immutable/chunks/02wgyksxmqdo9.js","/chat-static/_next/static/immutable/chunks/0jn2zliwqegp6.js","/chat-static/_next/static/immutable/chunks/0ps1qzh1nk6d-.js","/chat-static/_next/static/immutable/chunks/3968nzrjvd6wq.js","/chat-static/_next/static/immutable/chunks/1i2vjdx8kghud.js","/chat-static/_next/static/immutable/chunks/1k-jhipmqjyex.js","/chat-static/_next/static/immutable/chunks/1qm45i0y1ksq_.js","/chat-static/_next/static/immutable/chunks/1eik28lj_d79q.js","/chat-static/_next/static/immutable/chunks/0batqcj2db5tx.js","/chat-static/_next/static/immutable/chunks/22q80h5vljxme.js","/chat-static/_next/static/immutable/chunks/32f_xa0asusa0.js","/chat-static/_next/static/immutable/chunks/17-b0dujr-h8t.js","/chat-static/_next/static/immutable/chunks/0ttugpgpljuh_.js","/chat-static/_next/static/immutable/chunks/2bwf0nopjvnf1.js","/chat-static/_next/static/immutable/chunks/2mz9q5bdln3xq.js","/chat-static/_next/static/immutable/chunks/069x4vtgu4fpq.js","/chat-static/_next/static/immutable/chunks/0_h5jt2xwz8a-.js","/chat-static/_next/static/immutable/chunks/34q85al3g00t2.js"],"SWRDataProvider"] 91:T15cd,[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import './globals.css' import type { Metadata } from 'next' import { Geist } from 'next/font/google' const geistMono = Geist({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'Minimal Slides', description: 'A minimal slides application', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } html, body { height: 100%; margin: 0; padding: 0; } body { color: rgb(var(--foreground-rgb)); background: linear-gradient( to bottom, transparent, rgb(var(--background-end-rgb)) ) rgb(var(--background-start-rgb)); } ul { @apply pl-8 mx-auto max-w-2xl; } ul li::before { content: '•'; @apply inline-block w-8 mr-2 text-2xl; } ul li { @apply flex items-start; } [V0_FILE]typescriptreact:file="app/slides.tsx" export const slides = [

Welcome to Minimal Slides

Click anywhere or use arrow keys to navigate

Key Features

Minimalist design
Full-screen slides
Keyboard navigation
Click to advance
Individual slide URLs

Sample Heading Slide

This is a sample paragraph under the heading.

Quote Slide

"Simplicity is the ultimate sophistication."

- Leonardo da Vinci

Thank You!

Any questions?

] [V0_FILE]typescriptreact:file="app/s/[id]/page.tsx" import { slides } from '../../slides' import Slide from '../../components/Slide' export default function SlidePage({ params }: { params: { id: string } }) { const id = parseInt(params.id) const slide = slides[id - 1] if (!slide) { return

Slide not found

} return } export async function generateStaticParams() { return slides.map((_, index) => ({ id: (index + 1).toString(), })) } [V0_FILE]typescriptreact:file="app/page.tsx" import { redirect } from 'next/navigation' export default function Home() { redirect('/s/1') } [V0_FILE]typescriptreact:file="app/components/Slide.tsx" 'use client' import { useRouter } from 'next/navigation' import { useEffect, useState, useRef } from 'react' interface SlideProps { content: React.ReactNode id: number totalSlides: number } export default function Slide({ content, id, totalSlides }: SlideProps) { const router = useRouter() const touchStartX = useRef(null) const touchEndX = useRef(null) const handleKeyDown = (event: KeyboardEvent) => { if (event.key === 'ArrowRight' && id < totalSlides) { router.push(`/s/${id + 1}`) } else if (event.key === 'ArrowLeft' && id > 1) { router.push(`/s/${id - 1}`) } } const handleTouchStart = (e: React.TouchEvent) => { touchStartX.current = e.touches[0].clientX } const handleTouchMove = (e: React.TouchEvent) => { touchEndX.current = e.touches[0].clientX } const handleTouchEnd = () => { if (touchStartX.current === null || touchEndX.current === null) return const swipeDistance = touchStartX.current - touchEndX.current const minSwipeDistance = 50 // minimum distance to be considered a swipe if (swipeDistance > minSwipeDistance && id < totalSlides) { router.push(`/s/${id + 1}`) } else if (swipeDistance < -minSwipeDistance && id > 1) { router.push(`/s/${id - 1}`) } // Reset touch coordinates touchStartX.current = null touchEndX.current = null } useEffect(() => { window.addEventListener('keydown', handleKeyDown) return () => { window.removeEventListener('keydown', handleKeyDown) } }, [id]) return (

id < totalSlides && router.push(`/s/${id + 1}`)} onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd} >

{content}

{id}/{totalSlides}

) } 88:["$","$L8f",null,{"chatId":"4HUkZ60C1ZK","children":["$","$L90",null,{"data":{"@\"active-block\",\"4HUkZ60C1ZK\",":{"id":"eklP8YWEE9K","messageId":"WPxSwtevXeGe7kPIw1UfhnihGdReefgU","source":"$91","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"minimal-slides","type":"code-project","project":"minimal-slides"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"4HUkZ60C1ZK\",":false},"children":"$L92"}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This