[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { BlogCard } from "@/components/blog-card" import { Hero } from "@/components/hero" import { Newsletter } from "@/components/newsletter" // Mock blog posts data (in a real app, this would come from your database) const blogPosts = [ { id: 1, title: "Getting Started with Next.js 15", excerpt: "Learn how to build modern web applications with the latest features in Next.js 15.", content: "Full content here...", author: "John Doe", date: "2024-01-15", image: "/placeholder.svg?height=400&width=600", category: "Web Development", tags: ["Next.js", "React", "JavaScript"], }, { id: 2, title: "The Future of Web Development", excerpt: "Exploring upcoming trends and technologies that will shape the web development landscape.", content: "Full content here...", author: "Jane Smith", date: "2024-01-12", image: "/placeholder.svg?height=400&width=600", category: "Technology", tags: ["Web Development", "Trends", "Future"], }, { id: 3, title: "Building Responsive Designs", excerpt: "Master the art of creating websites that look great on all devices.", content: "Full content here...", author: "Mike Johnson", date: "2024-01-10", image: "/placeholder.svg?height=400&width=600", category: "Design", tags: ["CSS", "Responsive", "Design"], }, { id: 4, title: "Database Optimization Tips", excerpt: "Learn how to optimize your database queries for better performance.", content: "Full content here...", author: "Sarah Wilson", date: "2024-01-08", image: "/placeholder.svg?height=400&width=600", category: "Backend", tags: ["Database", "MySQL", "Performance"], }, ] export default function HomePage() { return (

{/* Featured Posts Section */}

Latest Blog Posts

Discover insights, tutorials, and stories from our community of developers and designers.

{blogPosts.map((post) => ( ))}

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" import Link from "next/link" export function Hero() { return (

Welcome to TechBlog

Your source for the latest in web development, design trends, and technology insights.

) } [V0_FILE]typescriptreact:file="components/blog-card.tsx" isMerged="true" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Calendar, User, ArrowRight } from "lucide-react" import Image from "next/image" import Link from "next/link" interface BlogPost { id: number title: string excerpt: string author: string date: string image: string category: string tags: string[] } interface BlogCardProps { post: BlogPost } export function BlogCard({ post }: BlogCardProps) { return (

{post.category}

{post.title}

{post.excerpt}

{post.author}

{new Date(post.date).toLocaleDateString()}

) } [V0_FILE]typescriptreact:file="components/newsletter.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Mail } from "lucide-react" export function Newsletter() { return (

Subscribe to Our Newsletter

Get the latest articles and updates delivered straight to your inbox.

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { Facebook, Twitter, Instagram, Github } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" export function ThemeToggle() { const { theme, setTheme } = useTheme() return ( ) } [V0_FILE]typescriptreact:file="app/blog/page.tsx" isMerged="true" import { BlogCard } from "@/components/blog-card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Search } from "lucide-react" // Mock blog posts data const blogPosts = [ { id: 1, title: "Getting Started with Next.js 15", excerpt: "Learn how to build modern web applications with the latest features in Next.js 15.", content: "Full content here...", author: "John Doe", date: "2024-01-15", image: "/placeholder.svg?height=400&width=600", category: "Web Development", tags: ["Next.js", "React", "JavaScript"], }, { id: 2, title: "The Future of Web Development", excerpt: "Exploring upcoming trends and technologies that will shape the web development landscape.", content: "Full content here...", author: "Jane Smith", date: "2024-01-12", image: "/placeholder.svg?height=400&width=600", category: "Technology", tags: ["Web Development", "Trends", "Future"], }, { id: 3, title: "Building Responsive Designs", excerpt: "Master the art of creating websites that look great on all devices.", content: "Full content here...", author: "Mike Johnson", date: "2024-01-10", image: "/placeholder.svg?height=400&width=600", category: "Design", tags: ["CSS", "Responsive", "Design"], }, { id: 4, title: "Database Optimization Tips", excerpt: "Learn how to optimize your database queries for better performance.", content: "Full content here...", author: "Sarah Wilson", date: "2024-01-08", image: "/placeholder.svg?height=400&width=600", category: "Backend", tags: ["Database", "MySQL", "Performance"], }, { id: 5, title: "JavaScript ES2024 Features", excerpt: "Discover the new features and improvements in the latest JavaScript specification.", content: "Full content here...", author: "Alex Chen", date: "2024-01-05", image: "/placeholder.svg?height=400&width=600", category: "JavaScript", tags: ["JavaScript", "ES2024", "Features"], }, { id: 6, title: "CSS Grid vs Flexbox", excerpt: "Understanding when to use CSS Grid and when to use Flexbox for your layouts.", content: "Full content here...", author: "Emma Davis", date: "2024-01-03", image: "/placeholder.svg?height=400&width=600", category: "CSS", tags: ["CSS", "Grid", "Flexbox"], }, ] export default function BlogPage() { return (

All Blog Posts

Explore our collection of articles covering web development, design, and technology.

{/* Search Bar */}

{/* Blog Posts Grid */}

{blogPosts.map((post) => ( ))}

{/* Load More Button */}

) } [V0_FILE]typescriptreact:file="app/blog/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/blog/[id]/page.tsx" isMerged="true" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import { Calendar, User, ArrowLeft, Share2 } from "lucide-react" import Image from "next/image" import Link from "next/link" // Mock blog post data const blogPost = { id: 1, title: "Getting Started with Next.js 15", content: `

Next.js 15 brings exciting new features and improvements that make building React applications even more powerful and efficient. In this comprehensive guide, we'll explore the key features and show you how to get started.

What's New in Next.js 15

The latest version of Next.js introduces several groundbreaking features:

Improved App Router: Enhanced performance and new capabilities
Server Components: Better server-side rendering with React Server Components
Turbopack: Faster build times with the new bundler
Enhanced TypeScript Support: Better type safety and developer experience

Getting Started

To create a new Next.js 15 project, run the following command:

npx create-next-app@latest my-app

This will set up a new project with all the latest features and best practices.

Key Features to Explore

Once you have your project set up, here are some key features to explore:

1. App Router

The App Router provides a new way to structure your application with improved performance and developer experience.

2. Server Components

Server Components allow you to render components on the server, reducing the JavaScript bundle size and improving performance.

3. Streaming

Stream your UI to provide a better user experience with faster initial page loads.

Conclusion

Next.js 15 represents a significant step forward in React development. With its new features and improvements, it's easier than ever to build fast, scalable web applications.

`, author: "John Doe", date: "2024-01-15", image: "/placeholder.svg?height=400&width=800", category: "Web Development", tags: ["Next.js", "React", "JavaScript"], readTime: "8 min read", } export default function BlogPostPage() { return (

{/* Back Button */} {/* Article Header */}

{blogPost.category} {blogPost.readTime}

{blogPost.title}

{blogPost.author}

{new Date(blogPost.date).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", })}

{/* Article Content */}

{/* Tags */}

About the Author

{blogPost.author .split(" ") .map((n) => n[0]) .join("")}

{blogPost.author}

Full-stack developer with 5+ years of experience in React, Next.js, and modern web technologies. Passionate about creating efficient and scalable web applications.

) } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" import { AdminDashboard } from "@/components/admin-dashboard" export default function AdminPage() { return } [V0_FILE]typescriptreact:file="components/admin-dashboard.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { PlusCircle, Edit, Trash2, Eye, BarChart3, FileText, MessageSquare } from "lucide-react" // Mock data const mockPosts = [ { id: 1, title: "Getting Started with Next.js 15", status: "published", author: "John Doe", date: "2024-01-15", views: 1250, comments: 23, }, { id: 2, title: "The Future of Web Development", status: "draft", author: "Jane Smith", date: "2024-01-12", views: 0, comments: 0, }, { id: 3, title: "Building Responsive Designs", status: "published", author: "Mike Johnson", date: "2024-01-10", views: 890, comments: 15, }, ] export function AdminDashboard() { const [posts, setPosts] = useState(mockPosts) const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false) const [newPost, setNewPost] = useState({ title: "", content: "", category: "", tags: "", status: "draft", }) const handleCreatePost = () => { const post = { id: posts.length + 1, title: newPost.title, status: newPost.status, author: "Admin", date: new Date().toISOString().split("T")[0], views: 0, comments: 0, } setPosts([...posts, post]) setNewPost({ title: "", content: "", category: "", tags: "", status: "draft" }) setIsCreateDialogOpen(false) } const handleDeletePost = (id: number) => { setPosts(posts.filter((post) => post.id !== id)) } const stats = [ { title: "Total Posts", value: posts.length, icon: FileText, color: "text-blue-600", }, { title: "Published", value: posts.filter((p) => p.status === "published").length, icon: Eye, color: "text-green-600", }, { title: "Total Views", value: posts.reduce((sum, post) => sum + post.views, 0).toLocaleString(), icon: BarChart3, color: "text-purple-600", }, { title: "Comments", value: posts.reduce((sum, post) => sum + post.comments, 0), icon: MessageSquare, color: "text-orange-600", }, ] return (

Admin Dashboard

Manage your blog content and settings