Scroll

import Scroll from '@/components/ui/Scroll';

export default function BasicDemo() {
  return (
    <Scroll
      className="h-64 w-full max-w-xl rounded-card border border-border bg-card"
      contentClassName="p-4"
      scrollbars="vertical"
    >
      <article className="max-w-prose space-y-4 text-sm leading-6 text-muted-foreground">
        <h4 className="text-base font-semibold text-foreground">
          Getting Started with Your Workspace
        </h4>
        <p>
          Welcome to your new digital workspace — a place where organization
          meets efficiency. This environment is designed to streamline your
          daily tasks, improve collaboration, and keep everything you need right
          at your fingertips.
        </p>
        <p>
          Start by exploring the main dashboard, where you'll find an overview
          of your recent activity, upcoming deadlines, and quick access to
          important tools. The intuitive layout ensures you spend less time
          searching and more time getting things done.
        </p>
        <p>
          Create new tasks with just a few clicks. Add descriptions, due dates,
          and assign them to your team members. Tasks can be grouped into
          categories or projects, making it easy to manage both small and large
          workloads. Comments and file attachments are supported too, so context
          is never lost.
        </p>
        <p>
          Need to focus? Use the built-in timer to track how long you spend on
          each task. Or switch to focus mode to minimize distractions and enter
          a clean workspace view. Every productivity tool here is built to help
          you stay in flow.
        </p>
        <p>
          Notifications keep you updated on project changes, mentions, and
          upcoming deadlines. They're smart enough not to overwhelm you — just
          what you need, when you need it.
        </p>
        <p>
          Customization is key. Choose from multiple layout views, toggle
          between dark and light themes, and rearrange components to match your
          workflow. Your workspace should feel like yours.
        </p>
        <p>
          Need help? The support panel is just a click away, offering tips,
          guides, and answers to frequently asked questions.
        </p>
        <p>
          Now that you're here, go ahead and start exploring. Whether you're
          planning your week, coordinating with teammates, or just organizing
          your thoughts — this workspace has you covered.
        </p>
      </article>
    </Scroll>
  );
}

import Scroll from '@/components/ui/Scroll';

export default function HorizontalDemo() {
  return (
    <Scroll
      className="h-64 w-full max-w-xl rounded-card border border-border bg-card"
      contentClassName="p-4"
      scrollbars="horizontal"
      type="always"
    >
      <article className="w-[52rem] space-y-4 text-sm leading-6 text-muted-foreground">
        <h4 className="text-base font-semibold text-foreground">
          Getting Started with Your Workspace
        </h4>
        <p>
          Welcome to your new digital workspace — a place where organization
          meets efficiency. This environment is designed to streamline your
          daily tasks, improve collaboration, and keep everything you need right
          at your fingertips.
        </p>
        <p>
          Start by exploring the main dashboard, where you'll find an overview
          of your recent activity, upcoming deadlines, and quick access to
          important tools. The intuitive layout ensures you spend less time
          searching and more time getting things done.
        </p>
      </article>
    </Scroll>
  );
}

import Scroll from '@/components/ui/Scroll';

export default function EdgeShadowDemo() {
  return (
    <Scroll
      edgeShadow
      className="h-64 w-full max-w-xl rounded-card border border-border bg-card"
      contentClassName="p-4"
      scrollbars="vertical"
    >
      <article className="max-w-prose space-y-4 text-sm leading-6 text-muted-foreground">
        <h4 className="text-base font-semibold text-foreground">
          Getting Started with Your Workspace
        </h4>
        <p>
          Welcome to your new digital workspace — a place where organization
          meets efficiency. This environment is designed to streamline your
          daily tasks, improve collaboration, and keep everything you need right
          at your fingertips.
        </p>
        <p>
          Start by exploring the main dashboard, where you'll find an overview
          of your recent activity, upcoming deadlines, and quick access to
          important tools. The intuitive layout ensures you spend less time
          searching and more time getting things done.
        </p>
        <p>
          Create new tasks with just a few clicks. Add descriptions, due dates,
          and assign them to your team members. Tasks can be grouped into
          categories or projects, making it easy to manage both small and large
          workloads. Comments and file attachments are supported too, so context
          is never lost.
        </p>
        <p>
          Need to focus? Use the built-in timer to track how long you spend on
          each task. Or switch to focus mode to minimize distractions and enter
          a clean workspace view. Every productivity tool here is built to help
          you stay in flow.
        </p>
        <p>
          Notifications keep you updated on project changes, mentions, and
          upcoming deadlines. They're smart enough not to overwhelm you — just
          what you need, when you need it.
        </p>
        <p>
          Customization is key. Choose from multiple layout views, toggle
          between dark and light themes, and rearrange components to match your
          workflow. Your workspace should feel like yours.
        </p>
        <p>
          Need help? The support panel is just a click away, offering tips,
          guides, and answers to frequently asked questions.
        </p>
        <p>
          Now that you're here, go ahead and start exploring. Whether you're
          planning your week, coordinating with teammates, or just organizing
          your thoughts — this workspace has you covered.
        </p>
      </article>
    </Scroll>
  );
}

import Scroll from '@/components/ui/Scroll';

export default function FlexSizeDemo() {
  return (
    <div className="flex h-72 w-full max-w-xl rounded-card border border-border bg-card">
      <Scroll.FlexSize
        className="min-h-0"
        contentClassName="p-4"
        flexRootClassName="w-full"
        scrollbars="vertical"
      >
        <article className="max-w-prose space-y-4 text-sm leading-6 text-muted-foreground">
          <h4 className="text-base font-semibold text-foreground">
            Getting Started with Your Workspace
          </h4>
          <p>
            Welcome to your new digital workspace — a place where organization
            meets efficiency. This environment is designed to streamline your
            daily tasks, improve collaboration, and keep everything you need
            right at your fingertips.
          </p>
          <p>
            Start by exploring the main dashboard, where you'll find an overview
            of your recent activity, upcoming deadlines, and quick access to
            important tools. The intuitive layout ensures you spend less time
            searching and more time getting things done.
          </p>
          <p>
            Create new tasks with just a few clicks. Add descriptions, due
            dates, and assign them to your team members. Tasks can be grouped
            into categories or projects, making it easy to manage both small and
            large workloads. Comments and file attachments are supported too, so
            context is never lost.
          </p>
          <p>
            Need to focus? Use the built-in timer to track how long you spend on
            each task. Or switch to focus mode to minimize distractions and
            enter a clean workspace view. Every productivity tool here is built
            to help you stay in flow.
          </p>
          <p>
            Notifications keep you updated on project changes, mentions, and
            upcoming deadlines. They're smart enough not to overwhelm you — just
            what you need, when you need it.
          </p>
          <p>
            Customization is key. Choose from multiple layout views, toggle
            between dark and light themes, and rearrange components to match
            your workflow. Your workspace should feel like yours.
          </p>
          <p>
            Need help? The support panel is just a click away, offering tips,
            guides, and answers to frequently asked questions.
          </p>
          <p>
            Now that you're here, go ahead and start exploring. Whether you're
            planning your week, coordinating with teammates, or just organizing
            your thoughts — this workspace has you covered.
          </p>
        </article>
      </Scroll.FlexSize>
    </div>
  );
}

import { useRef, useState } from 'react';
import Button from '@/components/ui/Button';
import Scroll from '@/components/ui/Scroll';

export default function ScrollToPositionDemo() {
  const viewportRef = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState(0);

  const scrollTo = (top: number) => {
    viewportRef.current?.scrollTo({ top, behavior: 'smooth' });
  };

  return (
    <div className="w-full max-w-xl">
      <Scroll
        className="h-64 rounded-card border border-border bg-card"
        contentClassName="p-4"
        edgeShadow
        scrollbars="vertical"
        viewportRef={viewportRef}
        onScrollPositionChange={({ y }) => setPosition(Math.round(y))}
      >
        <article className="max-w-prose space-y-8 text-sm leading-6 text-muted-foreground">
          <section className="space-y-3">
            <h4 className="text-base font-semibold text-foreground">
              Getting Started with Your Workspace
            </h4>
            <p>
              Welcome to your new digital workspace — a place where
              organization meets efficiency. This environment is designed to
              streamline your daily tasks, improve collaboration, and keep
              everything you need right at your fingertips.
            </p>
            <p>
              Start by exploring the main dashboard, where you'll find an
              overview of your recent activity, upcoming deadlines, and quick
              access to important tools.
            </p>
          </section>
          <section className="space-y-3">
            <h4 className="text-base font-semibold text-foreground">
              Create new tasks
            </h4>
            <p>
              Add descriptions, due dates, and assign them to your team members.
              Tasks can be grouped into categories or projects, making it easy
              to manage both small and large workloads.
            </p>
            <p>
              Comments and file attachments are supported too, so context is
              never lost.
            </p>
          </section>
          <section className="space-y-3">
            <h4 className="text-base font-semibold text-foreground">
              Need to focus?
            </h4>
            <p>
              Use the built-in timer to track how long you spend on each task.
              Or switch to focus mode to minimize distractions and enter a clean
              workspace view.
            </p>
            <p>
              Every productivity tool here is built to help you stay in flow.
            </p>
          </section>
          <section className="space-y-3">
            <h4 className="text-base font-semibold text-foreground">
              Stay updated
            </h4>
            <p>
              Notifications keep you updated on project changes, mentions, and
              upcoming deadlines. They're smart enough not to overwhelm you —
              just what you need, when you need it.
            </p>
            <p>
              Choose from multiple layout views, toggle between dark and light
              themes, and rearrange components to match your workflow.
            </p>
          </section>
          <section className="space-y-3">
            <h4 className="text-base font-semibold text-foreground">
              Start exploring
            </h4>
            <p>
              Need help? The support panel is just a click away, offering tips,
              guides, and answers to frequently asked questions.
            </p>
            <p>
              Now that you're here, go ahead and start exploring. Whether you're
              planning your week, coordinating with teammates, or just
              organizing your thoughts — this workspace has you covered.
            </p>
          </section>
        </article>
      </Scroll>
      <div className="mt-4 flex flex-wrap items-center gap-2">
        <Button onClick={() => scrollTo(0)}>Top</Button>
        <Button onClick={() => scrollTo(260)}>Middle</Button>
        <Button onClick={() => scrollTo(9999)}>Bottom</Button>
        <span className="ml-auto text-xs text-muted-foreground">
          y: {position}px
        </span>
      </div>
    </div>
  );
}