import type { Meta, StoryObj } from '@storybook/react'; import { CodeBlock } from '@/components/code-block'; import { Markdown, Padding } from './decorators'; const meta: Meta = { title: 'Code Block', component: CodeBlock, render: (args) => ( ), decorators: [ (Story) => (

), Markdown, Padding, ], }; export default meta; type Story = StoryObj; export const Normal: Story = {}; export const WithTitle: Story = { decorators: [ (Story) => ( <>

/src/components/parallax.tsx

), ], }; /** Generated by rehype-pretty-code */ const CodeLight = () => (


    
      export
       
      default
       
      function
       
      Parallax
      () {'{'}
    
    
      
      const
       
      ref
       
      =
       
      useRef
      <
      HTMLDivElement
      >(
      null
      );
    
     
    
      
      const
       {'{'} 
      scrollYProgress
       {'}'} 
      =
       
      useScroll
      
        ({'{'} target: ref {'}'});
      
    
     
    
      
      const
       
      yYellow
       
      =
       
      useParallax
      (scrollYProgress, 
      300
      );
    
    
      
      const
       
      yGreen
       
      =
       
      useParallax
      (scrollYProgress, 
      600
      );
    
     
    
      
      return
       (
    
    
       <
      motion.div
       
      ref
      =
      
        {'{'}ref{'}'}{' '}
      
      className
      =
      
        "flex h-1/2 w-2/3 flex-row gap-2"
      
      >
    
    
       <
      motion.div
       
      className
      =
      "w-1/3 bg-rose-600"
       />
    
    
       <
      motion.div
    
    
       
      className
      =
      "w-1/3 bg-amber-600"
    
    
       
      initial
      =
      
        {'{'}
        {'{'} y:{' '}
      
      0
      
        {' '}
        {'}'}
        {'}'}
      
    
    
       
      style
      =
      
        {'{'}
        {'{'} y: yYellow {'}'}
        {'}'}
      
    
    
       />
    
    
       <
      motion.div
    
    
       
      className
      =
      "w-1/3 bg-emerald-600"
    
    
       
      initial
      =
      
        {'{'}
        {'{'} y:{' '}
      
      0
      
        {' '}
        {'}'}
        {'}'}
      
    
    
       
      style
      =
      
        {'{'}
        {'{'} y: yGreen {'}'}
        {'}'}
      
    
    
       />
    
    
       </
      motion.div
      >
    
    
       );
    
    
      {'}'}

); /** Generated by rehype-pretty-code */ const CodeDark = () => (


    
      export
       
      default
       
      function
       
      Parallax
      () {'{'}
    
    
       
      const
       
      ref
       
      =
       
      useRef
      <
      HTMLDivElement
      >(
      null
      );
    
     
    
      
      const
       {'{'} 
      scrollYProgress
       {'}'} 
      =
       
      useScroll
      
        ({'{'} target: ref {'}'});
      
    
     
    
      
      const
       
      yYellow
       
      =
       
      useParallax
      (scrollYProgress, 
      300
      );
    
    
      
      const
       
      yGreen
       
      =
       
      useParallax
      (scrollYProgress, 
      600
      );
    
     
    
      
      return
       (
    
    
       <
      motion.div
       
      ref
      =
      
        {'{'}ref{'}'}{' '}
      
      className
      =
      
        "flex h-1/2 w-2/3 flex-row gap-2"
      
      >
    
    
       <
      motion.div
       
      className
      =
      
        "w-1/3 bg-rose-600"
      
       />
    
    
       <
      motion.div
    
    
       
      className
      =
      
        "w-1/3 bg-amber-600"
      
    
    
       
      initial
      =
      
        {'{'}
        {'{'} y:{' '}
      
      0
      
        {' '}
        {'}'}
        {'}'}
      
    
    
       
      style
      =
      
        {'{'}
        {'{'} y: yYellow {'}'}
        {'}'}
      
    
    
       />
    
    
       <
      motion.div
    
    
       
      className
      =
      
        "w-1/3 bg-emerald-600"
      
    
    
       
      initial
      =
      
        {'{'}
        {'{'} y:{' '}
      
      0
      
        {' '}
        {'}'}
        {'}'}
      
    
    
       
      style
      =
      
        {'{'}
        {'{'} y: yGreen {'}'}
        {'}'}
      
    
    
       />
    
    
       </
      motion.div
      >
    
    
       );
    
    
      {'}'}

);