Avatar

import {
    Avatar,
    AvatarFallback,
    AvatarImage,
  } from "@/components/ui/avatar";
  
  export function AvatarDemo() {
    return (
      <Avatar>
        <AvatarImage
          src="https://github.com/designali-com.png"
          alt="@designali"
        />
        <AvatarFallback>DA</AvatarFallback>
      </Avatar>
    );
  }

import {
    Avatar,
    AvatarBadge,
    AvatarFallback,
    AvatarImage,
  } from "@/components/ui/avatar";
  
  export function AvatarWithBadge() {
    return (
      <Avatar>
        <AvatarImage src="https://github.com/designali-com.png" alt="@designali" />
        <AvatarFallback>DA</AvatarFallback>
        <AvatarBadge className="bg-green-600 dark:bg-green-800" />
      </Avatar>
    );
  }

import { PlusIcon } from "lucide-react";

import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";

export function AvatarBadgeIconExample() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/designali-com.png" alt="@designali" />
      <AvatarFallback>DA</AvatarFallback>
      <AvatarBadge>
        <PlusIcon />
      </AvatarBadge>
    </Avatar>
  );
}

import {
    Avatar,
    AvatarFallback,
    AvatarGroup,
    AvatarImage,
  } from "@/components/ui/avatar";
  
  export function AvatarGroupExample() {
    return (
      <AvatarGroup>
        <Avatar>
          <AvatarImage src="https://github.com/designali-com.png" alt="@designali" />
          <AvatarFallback>DA</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
      </AvatarGroup>
    );
  }

import {
    Avatar,
    AvatarFallback,
    AvatarGroup,
    AvatarGroupCount,
    AvatarImage,
  } from "@/components/ui/avatar";
  
  export function AvatarGroupCountExample() {
    return (
      <AvatarGroup>
        <Avatar>
          <AvatarImage src="https://github.com/designali-com.png" alt="@designali" />
          <AvatarFallback>DA</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
        <AvatarGroupCount>+3</AvatarGroupCount>
      </AvatarGroup>
    );
  }

import { PlusIcon } from "lucide-react";

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar";

export function AvatarGroupCountIconExample() {
  return (
    <AvatarGroup>
      <Avatar>
        <AvatarImage src="https://github.com/designali-com.png" alt="@designali" />
        <AvatarFallback>DA</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <AvatarGroupCount>
        <PlusIcon />
      </AvatarGroupCount>
    </AvatarGroup>
  );
}

import {
    Avatar,
    AvatarFallback,
    AvatarImage,
  } from "@/components/ui/avatar";
  
  export function AvatarSizeExample() {
    return (
      <div className="flex flex-wrap items-center gap-2">
        <Avatar size="sm">
          <AvatarImage src="https://github.com/designali-com.png" alt="@designali" />
          <AvatarFallback>DA</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/designali-com.png" alt="@designali" />
          <AvatarFallback>DA</AvatarFallback>
        </Avatar>
        <Avatar size="lg">
          <AvatarImage src="https://github.com/designali-com.png" alt="@designali" />
          <AvatarFallback>DA</AvatarFallback>
        </Avatar>
      </div>
    );
  }

"use client";

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function AvatarDropdown() {
  return ( 
      <DropdownMenu>
        <DropdownMenuTrigger
          render={
            <Button variant="ghost" size="icon" className="rounded-full">
              <Avatar>
                <AvatarImage src="https://github.com/designali-com.png" alt="@designali" />
                <AvatarFallback>DA</AvatarFallback>
              </Avatar>
            </Button>
          }
        />
        <DropdownMenuContent className="w-32">
          <DropdownMenuGroup>
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuItem>Billing</DropdownMenuItem>
            <DropdownMenuItem>Settings</DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu> 
  );
}