[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}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This