Scroll Area

import { ScrollArea } from "@/components/ui/scroll-area"

export function ScrollAreaHorizontal() {
  return (
    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
      <div className="flex w-max space-x-4 p-4">
        {Array.from({ length: 20 }).map((_, i) => (
          <div
            key={i}
            className="shrink-0 rounded-md border border-slate-200 bg-white p-4 shadow-sm"
          >
            <div className="h-20 w-20 rounded-md bg-slate-100" />
            <div className="mt-2 text-sm font-medium">Item {i + 1}</div>
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

import { ScrollArea } from "@/components/ui/scroll-area"

export function ScrollAreaChat() {
  const messages = [
    "Hey there! How's it going?",
    "I'm doing well, thanks for asking!",
    "That's great to hear. What have you been up to lately?",
    "Just working on some new projects. How about you?",
    "Same here! I've been learning React and Next.js.",
    "That's awesome! Those are great technologies to learn.",
    "Yeah, I'm really enjoying it so far.",
    "If you need any help, feel free to ask!",
    "Thanks, I appreciate that!",
    "No problem at all. Good luck with your learning!",
  ]

  return (
    <ScrollArea className="h-64 w-full rounded-md border p-4">
      <div className="space-y-4">
        {messages.map((message, i) => (
          <div
            key={i}
            className={`flex ${
              i % 2 === 0 ? "justify-start" : "justify-end"
            }`}
          >
            <div
              className={`max-w-xs rounded-lg px-3 py-2 text-sm ${
                i % 2 === 0
                  ? "bg-muted text-muted-foreground"
                  : "bg-primary text-primary-foreground"
              }`}
            >
              {message}
            </div>
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}