[V0_FILE]typescriptreact:file="app/post/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { notFound } from "next/navigation" import CommentSection from "../../components/CommentSection" import SocialShare from "../../components/SocialShare" const posts = [ { id: 1, title: "AI: Your New Artsy Bestie", category: "Tech", content: "Who needs human creativity when you've got AI, right? Wrong! AI is here to amplify your artistic genius, not replace it. Imagine a world where your digital paintbrush is powered by machine learning, creating strokes you never thought possible. It's like having a hyper-caffeinated art assistant that never sleeps and doesn't steal your snacks. So, embrace the future, and let AI be the Robin to your Batman in the art world!", }, // Add more posts here... ] export default function Post({ params }: { params: { id: string } }) { const post = posts.find((p) => p.id === Number.parseInt(params.id)) if (!post) { notFound() } return (

{post.title}

{post.category}

{post.content}

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 74, 222, 128; --background-start-rgb: 17, 24, 39; --background-end-rgb: 17, 24, 39; } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } .font-pixel { font-family: var(--font-press-start-2p); text-shadow: 2px 2px 0 #000; letter-spacing: -1px; } .font-mono { font-family: var(--font-vt323); } /* Pixelated border effect */ .pixelated-border { box-shadow: 0 0 0 2px #4ade80, 0 0 0 4px #000, 0 0 0 6px #4ade80; } [V0_FILE]typescriptreact:file="app/components/PixelLogo.tsx" isMerged="true" import type React from "react" const PixelLogo: React.FC = () => { return (

{[...Array(64)].map((_, i) => (

))}

) } export default PixelLogo [V0_FILE]typescriptreact:file="app/components/BlinkingCursor.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" const BlinkingCursor: React.FC = () => { const [visible, setVisible] = useState(true) useEffect(() => { const interval = setInterval(() => { setVisible((v) => !v) }, 500) return () => clearInterval(interval) }, []) return } export default BlinkingCursor [V0_FILE]typescriptreact:file="app/components/CommentSection.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" interface Comment { id: number author: string content: string } const CommentSection: React.FC = () => { const [comments, setComments] = useState([]) const [newComment, setNewComment] = useState({ author: "", content: "" }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (newComment.author && newComment.content) { setComments([...comments, { ...newComment, id: Date.now() }]) setNewComment({ author: "", content: "" }) } } return (

Comments

{comments.map((comment) => (

{comment.author}:

{comment.content}

))}

setNewComment({ ...newComment, author: e.target.value })} className="mb-2 font-mono" />

setNewComment({ ...newComment, content: e.target.value })}
          className="mb-2 font-mono"
        />
        <Button type="submit" className="font-pixel">
          Submit
        </Button>
      </form>
    </div>
  )
}

export default CommentSection

[V0_FILE]typescriptreact:file="app/components/SocialShare.tsx" isMerged="true"
import type React from "react"
import { Twitter, Facebook, Linkedin } from "lucide-react"

interface SocialShareProps {
  url: string
  title: string
}

const SocialShare: React.FC<SocialShareProps> = ({ url, title }) => {
  const encodedUrl = encodeURIComponent(url)
  const encodedTitle = encodeURIComponent(title)

return (
    <div className="flex space-x-4 mt-4">
      <a
        href={`https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`}
        target="_blank"
        rel="noopener noreferrer"
        className="pixelated-border p-2 bg-gray-800 hover:bg-gray-700 transition-colors"
      >
        <Twitter className="w-6 h-6" />
      </a>
      <a
        href={`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`}
        target="_blank"
        rel="noopener noreferrer"
        className="pixelated-border p-2 bg-gray-800 hover:bg-gray-700 transition-colors"
      >
        <Facebook className="w-6 h-6" />
      </a>
      <a
        href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodedUrl}&title=${encodedTitle}`}
        target="_blank"
        rel="noopener noreferrer"
        className="pixelated-border p-2 bg-gray-800 hover:bg-gray-700 transition-colors"
      >
        <Linkedin className="w-6 h-6" />
      </a>
    </div>
  )
}

export default SocialShare

[V0_FILE]typescriptreact:file="app/components/FloatingPixels.tsx" isMerged="true"
"use client"

import type React from "react"
import { useEffect, useState } from "react"

interface Pixel {
  id: number
  x: number
  y: number
  size: number
  speed: number
}

const FloatingPixels: React.FC = () => {
  const [pixels, setPixels] = useState<Pixel[]>([])

useEffect(() => {
    const createPixels = () => {
      const newPixels: Pixel[] = []
      for (let i = 0; i < 20; i++) {
        newPixels.push({
          id: i,
          x: Math.random() * window.innerWidth,
          y: Math.random() * window.innerHeight,
          size: Math.random() * 4 + 2,
          speed: Math.random() * 0.5 + 0.1,
        })
      }
      setPixels(newPixels)
    }

createPixels()

const animatePixels = () => {
      setPixels((prevPixels) =>
        prevPixels.map((pixel) => ({
          ...pixel,
          y: pixel.y - pixel.speed,
          x: pixel.x + Math.sin(pixel.y * 0.1) * 0.5,
        })),
      )
    }

const intervalId = setInterval(animatePixels, 50)

return () => clearInterval(intervalId)
  }, [])

return (
    <div className="fixed inset-0 pointer-events-none">
      {pixels.map((pixel) => (
        <div
          key={pixel.id}
          className="absolute bg-green-400 opacity-50"
          style={{
            left: `${pixel.x}px`,
            top: `${pixel.y}px`,
            width: `${pixel.size}px`,
            height: `${pixel.size}px`,
          }}
        />
      ))}
    </div>
  )
}

export default FloatingPixels

[V0_FILE]typescriptreact:file="app/components/NavMenu.tsx" isMerged="true"
import Link from "next/link"
import { Monitor, Palette, DollarSign } from "lucide-react"

const NavMenu = () => {
  return (
    <nav className="flex justify-center space-x-4 my-4">
      <Link
        href="/category/tech"
        className="flex flex-col items-center p-2 bg-gray-800 rounded pixelated-border hover:bg-gray-700 transition-colors"
      >
        <Monitor className="w-6 h-6 mb-1" />
        <span className="font-pixel text-xs">Tech</span>
      </Link>
      <Link
        href="/category/art"
        className="flex flex-col items-center p-2 bg-gray-800 rounded pixelated-border hover:bg-gray-700 transition-colors"
      >
        <Palette className="w-6 h-6 mb-1" />
        <span className="font-pixel text-xs">Art</span>
      </Link>
      <Link
        href="/category/finance"
        className="flex flex-col items-center p-2 bg-gray-800 rounded pixelated-border hover:bg-gray-700 transition-colors"
      >
        <DollarSign className="w-6 h-6 mb-1" />
        <span className="font-pixel text-xs">Finance</span>
      </Link>
    </nav>
  )
}

export default NavMenu

[V0_FILE]typescriptreact:file="app/components/ThemeToggle.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Sun, Moon } from "lucide-react"

const ThemeToggle = () => {
  const [isDark, setIsDark] = useState(true)

useEffect(() => {
    const root = window.document.documentElement
    if (isDark) {
      root.classList.add("dark")
    } else {
      root.classList.remove("dark")
    }
  }, [isDark])

return (
    <button
      onClick={() => setIsDark(!isDark)}
      className="p-2 bg-gray-800 rounded pixelated-border hover:bg-gray-700 transition-colors"
    >
      {isDark ? <Sun className="w-6 h-6" /> : <Moon className="w-6 h-6" />}
    </button>
  )
}

export default ThemeToggle

[V0_FILE]typescriptreact:file="app/not-found.tsx" isMerged="true"
import Link from "next/link"

export default function NotFound() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen">
      <h1 className="text-4xl font-pixel mb-4">404 - Game Over</h1>
      <p className="font-mono mb-4">The page you're looking for is in another castle!</p>
      <Link
        href="/"
        className="font-pixel bg-green-600 text-black px-4 py-2 rounded hover:bg-green-500 transition-colors"
      >
        Continue?
      </Link>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen">
      <div className="w-16 h-16 border-4 border-green-400 border-t-transparent rounded-full animate-spin"></div>
      <p className="mt-4 font-pixel">Loading...</p>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/ColorfulPixelLogo.tsx" isMerged="true"
import type React from "react"

const ColorfulPixelLogo: React.FC = () => {
  const colors = ["bg-red-400", "bg-yellow-400", "bg-green-400", "bg-blue-400", "bg-purple-400", "bg-pink-400"]

return (
    <div className="w-24 h-24 grid grid-cols-8 grid-rows-8 gap-0.5 mb-4 transform rotate-45">
      {[...Array(64)].map((_, i) => (
        <div
          key={i}
          className={`w-full h-full ${
            [0, 7, 8, 15, 16, 23, 24, 31, 32, 39, 40, 47, 48, 55, 56, 63].includes(i)
              ? colors[Math.floor(Math.random() * colors.length)]
              : "bg-transparent"
          }`}
        />
      ))}
    </div>
  )
}

export default ColorfulPixelLogo

[V0_FILE]typescriptreact:file="app/components/SoundEffect.tsx" isEdit="true"
"use client"

import { useEffect, useRef } from "react"

const SoundEffect = () => {
  const audioContextRef = useRef<AudioContext | null>(null)

useEffect(() => {
    audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)()

const playSound = () => {
      if (audioContextRef.current) {
        const oscillator = audioContextRef.current.createOscillator()
        oscillator.type = "square"
        oscillator.frequency.setValueAtTime(440, audioContextRef.current.currentTime) // 440 Hz = A4 note

const gainNode = audioContextRef.current.createGain()
        gainNode.gain.setValueAtTime(0.1, audioContextRef.current.currentTime)
        gainNode.gain.exponentialRampToValueAtTime(0.01, audioContextRef.current.currentTime + 0.1)

oscillator.connect(gainNode)
        gainNode.connect(audioContextRef.current.destination)

oscillator.start()
        oscillator.stop(audioContextRef.current.currentTime + 0.1)
      }
    }

document.addEventListener("click", playSound)

return () => {
      document.removeEventListener("click", playSound)
      audioContextRef.current?.close()
    }
  }, [])

return null
}

export default SoundEffect

[V0_FILE]typescriptreact:file="app/data/posts.ts"
export const posts = [
  {
    id: 1,
    title: "AI: Your New Artsy Bestie",
    category: "Tech",
    content:
      "Who needs human creativity when you've got AI, right? Wrong! AI is here to amplify your artistic genius, not replace it. Imagine a world where your digital paintbrush is powered by machine learning, creating strokes you never thought possible. It's like having a hyper-caffeinated art assistant that never sleeps and doesn't steal your snacks. So, embrace the future, and let AI be the Robin to your Batman in the art world!",
  },
  {
    id: 2,
    title: "Crypto: Digital Gold or Fool's Gold?",
    category: "Finance",
    content:
      "Ah, cryptocurrency – the financial world's equivalent of a rollercoaster designed by a mad scientist. One day you're on top of the world, the next you're wondering if you can trade your digital coins for a cup of coffee. Is it the future of money or just a glorified game of digital hot potato? Buckle up, buttercup, because in this wild west of finance, the only thing more volatile than the market is the opinions of self-proclaimed crypto gurus!",
  },
  {
    id: 3,
    title: "Data Visualization: Making Numbers Pretty",
    category: "Art",
    content:
      "Ever tried to make sense of a spreadsheet and felt like you're decoding an alien language? Enter data visualization – the art of turning boring numbers into eye candy. It's like giving your data a makeover, transforming it from a plain Jane into a runway model. Suddenly, those mind-numbing statistics become a thrilling visual story. Who knew pie charts could be so delicious?",
  },
  {
    id: 4,
    title: "The Internet of Things: When Your Toaster Gets Smarter Than You",
    category: "Tech",
    content:
      "Welcome to the future, where your fridge judges your eating habits and your toaster has an existential crisis. The Internet of Things is turning every gadget in your home into a chatterbox. Soon, you'll be arguing with your smart thermostat about the perfect temperature while your AI-powered vacuum plots world domination. Just remember, when the robot uprising begins, it'll probably start with your smart coffee maker refusing to brew your morning joe!",
  },
  {
    id: 5,
    title: "NFTs: Digital Beanie Babies or the Future of Art?",
    category: "Art",
    content:
      "NFTs are the art world's latest craze – because apparently, we needed a way to make digital art as pretentious as the real thing. It's like buying air guitar, but with a certificate of authenticity. Are they the future of art ownership or just a way for people to brag about owning a JPEG? Only time will tell if these digital collectibles will be the next Mona Lisa or end up in the virtual garage sale of history.",
  },
  {
    id: 6,
    title: "Blockchain: Solving Problems You Didn't Know You Had",
    category: "Finance",
    content:
      "Blockchain is like the Swiss Army knife of the digital world – it claims to solve everything from financial fraud to bad hair days. It's a magical ledger that promises to make middlemen obsolete, which is great news for everyone except, well, middlemen. Will it revolutionize the world or just give tech bros something new to brag about at parties? Either way, it's got more chains than a rapper in the 90s!",
  },
  {
    id: 7,
    title: "Machine Learning: Teaching Computers to Think (What Could Go Wrong?)",
    category: "Tech",
    content:
      "Machine learning is like raising a digital child – you feed it data, teach it the ways of the world, and hope it doesn't decide to take over the planet. It's all fun and games until your AI starts outsmarting you at chess or questioning the meaning of life. Just remember, when your smart home starts making snarky comments about your Netflix choices, you only have yourself to blame!",
  },
  {
    id: 8,
    title: "The Gig Economy: Because Who Needs Job Security Anyway?",
    category: "Finance",
    content:
      "Welcome to the gig economy, where every day is a hustle and your office is wherever you can find Wi-Fi. It's the perfect solution for those who find stable employment and benefits just too boring. Why have one steady job when you can juggle seventeen different gigs and still barely make rent? But hey, at least you can work in your pajamas and call yourself an 'entrepreneur' on Instagram!",
  },
]

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import Link from "next/link"
import { posts } from "./data/posts"

export default function Home() {
  const categories = ["Tech", "Art", "Finance"]

return (
    <div>
      <h2 className="text-2xl font-pixel mb-6">Latest Pixelated Wisdom</h2>
      {categories.map((category) => (
        <div key={category} className="mb-8">
          <h3 className="text-xl font-pixel mb-4">{category}</h3>
          <div className="grid gap-6">
            {posts
              .filter((post) => post.category === category)
              .slice(0, 3)
              .map((post) => (
                <Link
                  key={post.id}
                  href={`/post/${post.id}`}
                  className="block p-6 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors"
                >
                  <h4 className="text-lg font-pixel mb-2">{post.title}</h4>
                  <span className="inline-block px-2 py-1 bg-green-600 text-black text-sm font-mono rounded">
                    {post.category}
                  </span>
                </Link>
              ))}
          </div>
          <Link href={`/category/${category.toLowerCase()}`} className="inline-block mt-4 font-pixel text-sm underline">
            See all {category} posts
          </Link>
        </div>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/category/[slug]/page.tsx"
import Link from "next/link"
import { posts } from "../../data/posts"
import { notFound } from "next/navigation"

export default function CategoryPage({ params }: { params: { slug: string } }) {
  const category = params.slug.charAt(0).toUpperCase() + params.slug.slice(1)
  const categoryPosts = posts.filter((post) => post.category.toLowerCase() === params.slug)

if (categoryPosts.length === 0) {
    notFound()
  }

return (
    <div>
      <h2 className="text-2xl font-pixel mb-6">{category} Posts</h2>
      <div className="grid gap-6">
        {categoryPosts.map((post) => (
          <Link
            key={post.id}
            href={`/post/${post.id}`}
            className="block p-6 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors"
          >
            <h3 className="text-xl font-pixel mb-2">{post.title}</h3>
            <p className="font-mono text-sm mb-2">{post.content.slice(0, 100)}...</p>
            <span className="inline-block px-2 py-1 bg-green-600 text-black text-sm font-mono rounded">
              {post.category}
            </span>
          </Link>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/PixelatedBackground.tsx"
const PixelatedBackground = () => {
  return (
    <div className="fixed inset-0 z-[-1] opacity-10">
      <div className="absolute inset-0 bg-grid-green-400/30 bg-grid-8 [mask-image:linear-gradient(to_bottom,white,transparent)]" />
    </div>
  )
}

export default PixelatedBackground

[V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isEdit="true" isQuickEdit="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-press-start-2p)"],
        mono: ["var(--font-vt323)"],
      },
      colors: {
        "retro-green": "#4ade80",
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      backgroundImage: {
        "grid-green-400":
          "linear-gradient(to right, #4ade80 1px, transparent 1px), linear-gradient(to bottom, #4ade80 1px, transparent 1px)",
      },
      backgroundSize: {
        "grid-8": "8px 8px",
      },
    },
  },
  plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import "./globals.css"
import { Press_Start_2P, VT323 } from "next/font/google"
import type React from "react"
import ColorfulPixelLogo from "./components/ColorfulPixelLogo"
import BlinkingCursor from "./components/BlinkingCursor"
import FloatingPixels from "./components/FloatingPixels"
import NavMenu from "./components/NavMenu"
import ThemeToggle from "./components/ThemeToggle"
import SoundEffect from "./components/SoundEffect"
import PixelatedBackground from "./components/PixelatedBackground"

const pressStart2P = Press_Start_2P({
  weight: "400",
  subsets: ["latin"],
  variable: "--font-press-start-2p",
})

const vt323 = VT323({
  weight: "400",
  subsets: ["latin"],
  variable: "--font-vt323",
})

export const metadata = {
  title: "Pixel Wisdom",
  description: "Tech, Art, and Finance tips with a retro twist",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body
        className={`${pressStart2P.variable} ${vt323.variable} font-sans bg-gray-900 text-green-400 dark:bg-gray-900 dark:text-green-400`}
      >
        <PixelatedBackground />
        <div className="max-w-4xl mx-auto px-4">
          <header className="py-8 flex flex-col items-center">
            <ColorfulPixelLogo />
            <h1 className="text-4xl font-bold text-center font-pixel mb-2">Pixel Wisdom</h1>
            <p className="text-xl text-center font-mono flex items-center">
              Tech • Art • Finance <BlinkingCursor />
            </p>
            <NavMenu />
            <div className="mt-4">
              <ThemeToggle />
            </div>
          </header>
          <main>{children}</main>
          <footer className="py-8 text-center font-mono">© 2023 Pixel Wisdom. All rights pixelated.</footer>
        </div>
        <FloatingPixels />
        <SoundEffect />
      </body>
    </html>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This