blog.krasnikov.pro/components/stories/code-block.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';

import { CodeBlock } from '@/components/code-block';
import { Markdown, Padding } from './decorators';

const meta: Meta<typeof CodeBlock> = {
  title: 'Code Block',
  component: CodeBlock,
  render: (args) => (
    <CodeBlock {...args}>
      <CodeLight />
      <CodeDark />
    </CodeBlock>
  ),
  decorators: [
    (Story) => (
      <div className="w-full">
        <Story />
      </div>
    ),
    Markdown,
    Padding,
  ],
};

export default meta;
type Story = StoryObj<typeof CodeBlock>;

export const Normal: Story = {};

export const WithTitle: Story = {
  decorators: [
    (Story) => (
      <>
        <div data-rehype-pretty-code-title="">/src/components/parallax.tsx</div>
        <Story />
      </>
    ),
  ],
};

/** Generated by rehype-pretty-code */
const CodeLight = () => (
  <code data-language="tsx" data-theme="light">
    <span className="line">
      <span style={{ color: '#D73A49' }}>export</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#D73A49' }}>default</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#D73A49' }}>function</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#6F42C1' }}>Parallax</span>
      <span style={{ color: '#24292E' }}>() {'{'}</span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}></span>
      <span style={{ color: '#D73A49' }}>const</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#005CC5' }}>ref</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#D73A49' }}>=</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#6F42C1' }}>useRef</span>
      <span style={{ color: '#24292E' }}>&lt;</span>
      <span style={{ color: '#6F42C1' }}>HTMLDivElement</span>
      <span style={{ color: '#24292E' }}>&gt;(</span>
      <span style={{ color: '#005CC5' }}>null</span>
      <span style={{ color: '#24292E' }}>);</span>
    </span>
    <span className="line"> </span>
    <span className="line">
      <span style={{ color: '#24292E' }}></span>
      <span style={{ color: '#D73A49' }}>const</span>
      <span style={{ color: '#24292E' }}> {'{'} </span>
      <span style={{ color: '#005CC5' }}>scrollYProgress</span>
      <span style={{ color: '#24292E' }}> {'}'} </span>
      <span style={{ color: '#D73A49' }}>=</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#6F42C1' }}>useScroll</span>
      <span style={{ color: '#24292E' }}>
        ({'{'} target: ref {'}'});
      </span>
    </span>
    <span className="line"> </span>
    <span className="line">
      <span style={{ color: '#24292E' }}></span>
      <span style={{ color: '#D73A49' }}>const</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#005CC5' }}>yYellow</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#D73A49' }}>=</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#6F42C1' }}>useParallax</span>
      <span style={{ color: '#24292E' }}>(scrollYProgress, </span>
      <span style={{ color: '#005CC5' }}>300</span>
      <span style={{ color: '#24292E' }}>);</span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}></span>
      <span style={{ color: '#D73A49' }}>const</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#005CC5' }}>yGreen</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#D73A49' }}>=</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#6F42C1' }}>useParallax</span>
      <span style={{ color: '#24292E' }}>(scrollYProgress, </span>
      <span style={{ color: '#005CC5' }}>600</span>
      <span style={{ color: '#24292E' }}>);</span>
    </span>
    <span className="line"> </span>
    <span className="line">
      <span style={{ color: '#24292E' }}></span>
      <span style={{ color: '#D73A49' }}>return</span>
      <span style={{ color: '#24292E' }}> (</span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> &lt;</span>
      <span style={{ color: '#005CC5' }}>motion.div</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#6F42C1' }}>ref</span>
      <span style={{ color: '#D73A49' }}>=</span>
      <span style={{ color: '#24292E' }}>
        {'{'}ref{'}'}{' '}
      </span>
      <span style={{ color: '#6F42C1' }}>className</span>
      <span style={{ color: '#D73A49' }}>=</span>
      <span style={{ color: '#032F62' }}>
        &quot;flex h-1/2 w-2/3 flex-row gap-2&quot;
      </span>
      <span style={{ color: '#24292E' }}>&gt;</span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> &lt;</span>
      <span style={{ color: '#005CC5' }}>motion.div</span>
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#6F42C1' }}>className</span>
      <span style={{ color: '#D73A49' }}>=</span>
      <span style={{ color: '#032F62' }}>&quot;w-1/3 bg-rose-600&quot;</span>
      <span style={{ color: '#24292E' }}> /&gt;</span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> &lt;</span>
      <span style={{ color: '#005CC5' }}>motion.div</span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#6F42C1' }}>className</span>
      <span style={{ color: '#D73A49' }}>=</span>
      <span style={{ color: '#032F62' }}>&quot;w-1/3 bg-amber-600&quot;</span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#6F42C1' }}>initial</span>
      <span style={{ color: '#D73A49' }}>=</span>
      <span style={{ color: '#24292E' }}>
        {'{'}
        {'{'} y:{' '}
      </span>
      <span style={{ color: '#005CC5' }}>0</span>
      <span style={{ color: '#24292E' }}>
        {' '}
        {'}'}
        {'}'}
      </span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#6F42C1' }}>style</span>
      <span style={{ color: '#D73A49' }}>=</span>
      <span style={{ color: '#24292E' }}>
        {'{'}
        {'{'} y: yYellow {'}'}
        {'}'}
      </span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> /&gt;</span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> &lt;</span>
      <span style={{ color: '#005CC5' }}>motion.div</span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#6F42C1' }}>className</span>
      <span style={{ color: '#D73A49' }}>=</span>
      <span style={{ color: '#032F62' }}>&quot;w-1/3 bg-emerald-600&quot;</span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#6F42C1' }}>initial</span>
      <span style={{ color: '#D73A49' }}>=</span>
      <span style={{ color: '#24292E' }}>
        {'{'}
        {'{'} y:{' '}
      </span>
      <span style={{ color: '#005CC5' }}>0</span>
      <span style={{ color: '#24292E' }}>
        {' '}
        {'}'}
        {'}'}
      </span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> </span>
      <span style={{ color: '#6F42C1' }}>style</span>
      <span style={{ color: '#D73A49' }}>=</span>
      <span style={{ color: '#24292E' }}>
        {'{'}
        {'{'} y: yGreen {'}'}
        {'}'}
      </span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> /&gt;</span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> &lt;/</span>
      <span style={{ color: '#005CC5' }}>motion.div</span>
      <span style={{ color: '#24292E' }}>&gt;</span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}> );</span>
    </span>
    <span className="line">
      <span style={{ color: '#24292E' }}>{'}'}</span>
    </span>
  </code>
);

/** Generated by rehype-pretty-code */
const CodeDark = () => (
  <code data-language="tsx" data-theme="dark">
    <span className="line">
      <span style={{ color: 'rgb(249, 117, 131)' }}>export</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>default</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>function</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>Parallax</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>() {'{'}</span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>const</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>ref</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>=</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>useRef</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>&lt;</span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>HTMLDivElement</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>&gt;(</span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>null</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>);</span>
    </span>
    <span className="line"> </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}></span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>const</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> {'{'} </span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>scrollYProgress</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> {'}'} </span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>=</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>useScroll</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>
        ({'{'} target: ref {'}'});
      </span>
    </span>
    <span className="line"> </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}></span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>const</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>yYellow</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>=</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>useParallax</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>(scrollYProgress, </span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>300</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>);</span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}></span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>const</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>yGreen</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>=</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>useParallax</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>(scrollYProgress, </span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>600</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>);</span>
    </span>
    <span className="line"> </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}></span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>return</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> (</span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> &lt;</span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>motion.div</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>ref</span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>=</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>
        {'{'}ref{'}'}{' '}
      </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>className</span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>=</span>
      <span style={{ color: 'rgb(158, 203, 255)' }}>
        &quot;flex h-1/2 w-2/3 flex-row gap-2&quot;
      </span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>&gt;</span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> &lt;</span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>motion.div</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>className</span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>=</span>
      <span style={{ color: 'rgb(158, 203, 255)' }}>
        &quot;w-1/3 bg-rose-600&quot;
      </span>
      <span style={{ color: 'rgb(225, 228, 232)' }}> /&gt;</span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> &lt;</span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>motion.div</span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>className</span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>=</span>
      <span style={{ color: 'rgb(158, 203, 255)' }}>
        &quot;w-1/3 bg-amber-600&quot;
      </span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>initial</span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>=</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>
        {'{'}
        {'{'} y:{' '}
      </span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>0</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>
        {' '}
        {'}'}
        {'}'}
      </span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>style</span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>=</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>
        {'{'}
        {'{'} y: yYellow {'}'}
        {'}'}
      </span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> /&gt;</span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> &lt;</span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>motion.div</span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>className</span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>=</span>
      <span style={{ color: 'rgb(158, 203, 255)' }}>
        &quot;w-1/3 bg-emerald-600&quot;
      </span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>initial</span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>=</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>
        {'{'}
        {'{'} y:{' '}
      </span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>0</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>
        {' '}
        {'}'}
        {'}'}
      </span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> </span>
      <span style={{ color: 'rgb(179, 146, 240)' }}>style</span>
      <span style={{ color: 'rgb(249, 117, 131)' }}>=</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>
        {'{'}
        {'{'} y: yGreen {'}'}
        {'}'}
      </span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> /&gt;</span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> &lt;/</span>
      <span style={{ color: 'rgb(121, 184, 255)' }}>motion.div</span>
      <span style={{ color: 'rgb(225, 228, 232)' }}>&gt;</span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}> );</span>
    </span>
    <span className="line">
      <span style={{ color: 'rgb(225, 228, 232)' }}>{'}'}</span>
    </span>
  </code>
);