Spoiler Component Test

This is a test page for the spoiler component with pixelated mosaic style!

Basic Usage

In .mdx file:

import { Spoiler } from '@/components/ui/spoiler'
 
// Block spoiler
<Spoiler variant="block">
  Hidden content here
</Spoiler>
 
// Inline spoiler
The answer is <Spoiler variant="inline">forty-two</Spoiler>.
 
// With default open state
<Spoiler variant="block" defaultOpen>
  This starts revealed
</Spoiler>

Block Spoiler

This content is hidden with a pixelated mosaic overlay! It can contain multiple paragraphs.

Second paragraph here with more text to see how the pixelated effect looks on larger content blocks.

Inline Spoiler

The answer to the ultimate question of life, the universe, and everything is forty-two (according to Deep Thought).

Code in Spoilers

You can hide code snippets:

function secretAlgorithm() {
  const answer = 6 * 7;
  return answer;
}

def calculate_secret():
    return 6 * 7

Images in Spoilers

You can hide images with spoilers:

Hidden image

Caption: This image is hidden until revealed!