Build Beautiful Interfaces

import { Heart, Trash } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  SwipeLeftActions,
  SwipeRightActions,
  SwipeRow,
  SwipeRowContent,
} from "@/components/molecule-ui/swipe-row"

export function SwipeRowDemo() {
  return (
    <div className="w-full md:w-2/3">
      <SwipeRow className="bg-muted rounded-md">
        <SwipeLeftActions>
          <LeftActions />
        </SwipeLeftActions>
        <SwipeRowContent>
          <div className="flex items-center gap-4">
            <div>
              <Avatar>
                <AvatarImage
                  src="https://avatars.githubusercontent.com/u/1?v=4"
                  alt="MUI"
                />
                <AvatarFallback>LM</AvatarFallback>
              </Avatar>
            </div>
            <div>
              <h3>Liam Patel</h3>
              <p className="text-muted-foreground text-sm">
                Swipe to see actions
              </p>
            </div>
          </div>
        </SwipeRowContent>
        <SwipeRightActions>
          <RightActions />
        </SwipeRightActions>
      </SwipeRow>
    </div>
  )
}

function LeftActions() {
  return (
    <>
      <button className="flex h-full items-center justify-center bg-blue-500 px-6 text-white transition-colors">
        <Heart size={20} />
      </button>{" "}
    </>
  )
}

function RightActions() {
  return (
    <>
      <button className="flex h-full items-center justify-center bg-red-500 px-6 text-white transition-colors">
        <Trash size={20} />
      </button>
    </>
  )
}

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
  Discussion,
  DiscussionBody,
  DiscussionContent,
  DiscussionExpand,
  DiscussionItem,
  DiscussionReplies,
  DiscussionTitle,
} from "@/components/molecule-ui/discussion"

export function DiscussionDemo() {
  return (
    <div className="w-full md:w-3/4">
      <ScrollArea className="max-h-[400px] overflow-auto">
        <Discussion
          defaultValue={["item-1"]}
          type="multiple"
          className="w-full"
        >
          <DiscussionItem value="item-1">
            <DiscussionContent className="gap-2">
              <div>
                <Avatar>
                  <AvatarImage src="https://randomuser.me/api/portraits/women/44.jpg" />
                  <AvatarFallback>MUI</AvatarFallback>
                </Avatar>
              </div>
              <div className="flex flex-col gap-2">
                <div className="flex flex-col gap-1">
                  <DiscussionTitle className="flex items-center gap-2">
                    <div>Jane Smith</div>
                    <div className="text-muted-foreground text-xs">
                      @janesmith
                    </div>
                    <span className="text-muted-foreground text-xs">•</span>
                    <div className="text-muted-foreground text-xs">
                      1 hour ago
                    </div>
                  </DiscussionTitle>
                  <DiscussionBody>
                    This is a great article! Thanks for sharing your insights. I
                    particularly enjoyed the section about accessibility best
                    practices.
                  </DiscussionBody>
                </div>
                <DiscussionExpand />
              </div>
            </DiscussionContent>
            <DiscussionReplies>
              <DiscussionItem value="item-1.1">
                <DiscussionContent className="gap-2">
                  <div>
                    <Avatar>
                      <AvatarImage src="https://randomuser.me/api/portraits/men/22.jpg" />
                      <AvatarFallback>MUI</AvatarFallback>
                    </Avatar>
                  </div>
                  <div className="flex flex-col gap-2">
                    <div className="flex flex-col gap-1">
                      <DiscussionTitle className="flex items-center gap-2">
                        <div>Liam Patel</div>
                        <div className="text-muted-foreground text-xs">
                          @liampatel
                        </div>
                        <span className="text-muted-foreground text-xs">•</span>
                        <div className="text-muted-foreground text-xs">
                          34 minutes ago
                        </div>
                      </DiscussionTitle>
                      <DiscussionBody>
                        I agree! The examples were particularly helpful. Do you
                        have any recommendations for further reading?
                      </DiscussionBody>
                    </div>
                    <DiscussionExpand />
                  </div>
                </DiscussionContent>
                <DiscussionReplies>
                  <DiscussionItem value="item-1.1.1">
                    <DiscussionContent className="gap-2">
                      <div>
                        <Avatar>
                          <AvatarImage src="https://randomuser.me/api/portraits/women/68.jpg" />
                          <AvatarFallback>MUI</AvatarFallback>
                        </Avatar>
                      </div>
                      <div className="flex flex-col gap-2">
                        <div className="flex flex-col gap-1">
                          <DiscussionTitle className="flex items-center gap-2">
                            <div>Alex Chen</div>
                            <div className="text-muted-foreground text-xs">
                              @alexchen
                            </div>
                            <span className="text-muted-foreground text-xs">
                              •
                            </span>
                            <div className="text-muted-foreground text-xs">
                              26 minutes ago
                            </div>
                          </DiscussionTitle>
                          <DiscussionBody>
                            Check out the MDN docs on ARIA - they're
                            comprehensive and well-maintained.
                          </DiscussionBody>
                        </div>
                      </div>
                    </DiscussionContent>
                  </DiscussionItem>
                </DiscussionReplies>
              </DiscussionItem>
              <DiscussionItem value="item-1.2">
                <DiscussionContent className="gap-2">
                  <div>
                    <Avatar>
                      <AvatarImage src="https://randomuser.me/api/portraits/women/32.jpg" />
                      <AvatarFallback>MUI</AvatarFallback>
                    </Avatar>
                  </div>
                  <div className="flex flex-col gap-2">
                    <div className="flex flex-col gap-1">
                      <DiscussionTitle className="flex items-center gap-2">
                        <div>Sarah Wilson</div>
                        <div className="text-muted-foreground text-xs">
                          @sarahwilson
                        </div>
                        <span className="text-muted-foreground text-xs">•</span>
                        <div className="text-muted-foreground text-xs">
                          14 minutes ago
                        </div>
                      </DiscussionTitle>
                      <DiscussionBody>
                        Thanks for the detailed explanation! This will
                        definitely help with my current project.
                      </DiscussionBody>
                    </div>
                  </div>
                </DiscussionContent>
              </DiscussionItem>
            </DiscussionReplies>
          </DiscussionItem>
        </Discussion>
      </ScrollArea>
    </div>
  )
}

import { SpinningCircle } from "@/components/molecule-ui/spinning-circle"

export function SpinningCircleWithMessageDemo() {
  return <SpinningCircle message="Loading..." />
}