From f6f008dbf055ffa27392d94e36341159da91e09d Mon Sep 17 00:00:00 2001
From: mouracamila <camilapaleo@gmail.com>
Date: Sun, 10 Apr 2022 19:00:24 +0200
Subject: [PATCH 01/10] add base to the avatar component

---
 src/Root.tsx              |  9 ++++++
 src/components/Avatar.tsx | 31 ++++++++++++++++++++
 src/components/index.ts   |  1 +
 src/pages/AvatarPage.tsx  | 59 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 100 insertions(+)
 create mode 100644 src/components/Avatar.tsx
 create mode 100644 src/pages/AvatarPage.tsx

diff --git a/src/Root.tsx b/src/Root.tsx
index 65b6e2759..7456d65f8 100644
--- a/src/Root.tsx
+++ b/src/Root.tsx
@@ -14,6 +14,7 @@ import {
   HiMenuAlt1,
   HiPencilAlt,
   HiStar,
+  HiUser,
 } from 'react-icons/hi';
 import { BsCreditCard2FrontFill, BsGithub, BsImages } from 'react-icons/bs';
 import { FaSpinner } from 'react-icons/fa';
@@ -24,6 +25,7 @@ import { Route, Routes } from 'react-router-dom';
 import { DarkThemeToggle, Navbar, Sidebar, SidebarItem, Spinner } from './components';
 
 import DashboardPage from './pages/DashboardPage';
+import AvatarPage from './pages/AvatarPage';
 import AlertsPage from './pages/AlertsPage';
 import AccordionPage from './pages/AccordionPage';
 import BadgesPage from './pages/BadgesPage';
@@ -63,6 +65,12 @@ export const Root: FC = () => {
         title: 'Accordion',
         href: '/accordion',
       },
+      {
+        group: false,
+        icon: HiUser,
+        title: 'Avatar',
+        href: '/avatar',
+      },
       {
         group: false,
         icon: HiBadgeCheck,
@@ -196,6 +204,7 @@ export const Root: FC = () => {
               <Route path="" element={<DashboardPage />} />
               <Route path="alerts" element={<AlertsPage />} />
               <Route path="accordion" element={<AccordionPage />} />
+              <Route path="avatar" element={<AvatarPage />} />
               <Route path="badges" element={<BadgesPage />} />
               <Route path="breadcrumb" element={<BreadcrumbPage />} />
               <Route path="buttons" element={<ButtonsPage />} />
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
new file mode 100644
index 000000000..6393cbbf9
--- /dev/null
+++ b/src/components/Avatar.tsx
@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
+
+export type AvatarProps = PropsWithChildren<{
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  rounded?: boolean;
+  bordered?: boolean;
+  img: string;
+}>;
+
+const sizeClasses: Record<AvatarProps['size'] & string, string> = {
+  xs: 'w-6 h-6',
+  sm: 'w-8 h-8',
+  md: 'w-10 h-10',
+  lg: 'w-20 h-20',
+  xl: 'w-36 h-36',
+};
+
+export const Avatar: React.FC<AvatarProps> = ({ size = 'md', rounded = false, bordered = false, img = null }) => {
+  return (
+    <img
+      className={classNames(sizeClasses[size], {
+        rounded: !rounded,
+        'rounded-full': rounded,
+        'rounded-full p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
+      })}
+      src={img}
+      alt="Rounded avatar"
+    />
+  );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index d3cff4249..ee0ff5334 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from './Alert';
 export * from './accordion/Accordion';
+export * from './Avatar';
 export * from './Badge';
 export * from './Breadcrumb';
 export * from './Button';
diff --git a/src/pages/AvatarPage.tsx b/src/pages/AvatarPage.tsx
new file mode 100644
index 000000000..8263fd4c8
--- /dev/null
+++ b/src/pages/AvatarPage.tsx
@@ -0,0 +1,59 @@
+import { FC } from 'react';
+import { HiEye, HiInformationCircle } from 'react-icons/hi';
+
+import { Avatar } from '../components';
+import { CodeExample, DemoPage } from './DemoPage';
+
+const AvatarPage: FC = () => {
+  const examples: CodeExample[] = [
+    {
+      title: 'Default Avatar',
+      code: (
+        <div className="flex flex-wrap gap-2">
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded />
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" />
+        </div>
+      ),
+    },
+    {
+      title: 'Bordered Avatar',
+      code: <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" bordered />,
+    },
+    {
+      title: 'Placeholder',
+      code: <Avatar />,
+    },
+    {
+      title: 'Dot indicator',
+      code: <Avatar />,
+    },
+    {
+      title: 'Stacked',
+      code: <Avatar />,
+    },
+    {
+      title: 'Avatar text',
+      code: <Avatar />,
+    },
+    {
+      title: 'User dropdown',
+      code: <Avatar />,
+    },
+    {
+      title: 'Sizing',
+      code: (
+        <div className="flex flex-wrap items-center gap-2">
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="xs" />
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="sm" />
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="md" />
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="lg" />
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="xl" />
+        </div>
+      ),
+    },
+  ];
+
+  return <DemoPage examples={examples} />;
+};
+
+export default AvatarPage;

From aced955e843524b93ebf88385596da73953caece Mon Sep 17 00:00:00 2001
From: mouracamila <camilapaleo@gmail.com>
Date: Mon, 11 Apr 2022 11:32:17 +0200
Subject: [PATCH 02/10] add status indicator to the avatar

---
 src/components/Avatar.tsx | 54 +++++++++++++++++++++++++++++++--------
 src/pages/AvatarPage.tsx  | 22 +++++++++++++++-
 2 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 6393cbbf9..1d45f889c 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -6,6 +6,8 @@ export type AvatarProps = PropsWithChildren<{
   rounded?: boolean;
   bordered?: boolean;
   img: string;
+  status?: 'offline' | 'online' | 'away' | 'busy';
+  statusPosition?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
 }>;
 
 const sizeClasses: Record<AvatarProps['size'] & string, string> = {
@@ -16,16 +18,48 @@ const sizeClasses: Record<AvatarProps['size'] & string, string> = {
   xl: 'w-36 h-36',
 };
 
-export const Avatar: React.FC<AvatarProps> = ({ size = 'md', rounded = false, bordered = false, img = null }) => {
+const statusClasses: Record<AvatarProps['status'] & string, string> = {
+  offline: 'bg-gray-400',
+  online: 'bg-green-400',
+  away: 'bg-yellow-400',
+  busy: 'bg-red-400',
+};
+
+const statusPositionClasses: Record<AvatarProps['statusPosition'] & string, string> = {
+  'top-left': 'top-0 right-7',
+  'top-right': 'top-0 left-7',
+  'bottom-left': 'bottom-0 right-7',
+  'bottom-right': 'bottom-0 left-7',
+};
+
+export const Avatar: React.FC<AvatarProps> = ({
+  img,
+  status,
+  statusPosition = 'top-right',
+  size = 'md',
+  rounded = false,
+  bordered = false,
+}) => {
   return (
-    <img
-      className={classNames(sizeClasses[size], {
-        rounded: !rounded,
-        'rounded-full': rounded,
-        'rounded-full p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
-      })}
-      src={img}
-      alt="Rounded avatar"
-    />
+    <div className="relative">
+      <img
+        className={classNames(sizeClasses[size], {
+          rounded: !rounded,
+          'rounded-full': rounded,
+          'rounded-full p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
+        })}
+        src={img}
+        alt="Rounded avatar"
+      />
+      {status && (
+        <span
+          className={classNames(
+            'absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800',
+            statusClasses[status],
+            statusPositionClasses[statusPosition],
+          )}
+        ></span>
+      )}
+    </div>
   );
 };
diff --git a/src/pages/AvatarPage.tsx b/src/pages/AvatarPage.tsx
index 8263fd4c8..d68a7b00a 100644
--- a/src/pages/AvatarPage.tsx
+++ b/src/pages/AvatarPage.tsx
@@ -25,7 +25,27 @@ const AvatarPage: FC = () => {
     },
     {
       title: 'Dot indicator',
-      code: <Avatar />,
+      code: (
+        <div className="flex flex-wrap gap-2">
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded status="online" />
+          <Avatar
+            img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+            status="busy"
+            statusPosition="top-left"
+          />
+          <Avatar
+            img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+            rounded
+            status="offline"
+            statusPosition="bottom-right"
+          />
+          <Avatar
+            img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+            status="away"
+            statusPosition="bottom-left"
+          />
+        </div>
+      ),
     },
     {
       title: 'Stacked',

From ab710ceab29d8f3eaa108f4ea461b451c4f404b4 Mon Sep 17 00:00:00 2001
From: mouracamila <camilapaleo@gmail.com>
Date: Mon, 11 Apr 2022 13:40:34 +0200
Subject: [PATCH 03/10] fixes the status dot indicator position at the avatar
 component

---
 src/components/Avatar.tsx | 8 ++++----
 src/pages/AvatarPage.tsx  | 5 +++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 1d45f889c..ba8251cb9 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -26,10 +26,10 @@ const statusClasses: Record<AvatarProps['status'] & string, string> = {
 };
 
 const statusPositionClasses: Record<AvatarProps['statusPosition'] & string, string> = {
-  'top-left': 'top-0 right-7',
-  'top-right': 'top-0 left-7',
-  'bottom-left': 'bottom-0 right-7',
-  'bottom-right': 'bottom-0 left-7',
+  'top-left': '-top-1 -right-1',
+  'top-right': '-top-1 -left-1',
+  'bottom-left': '-bottom-1 -right-1',
+  'bottom-right': '-bottom-1 -left-1',
 };
 
 export const Avatar: React.FC<AvatarProps> = ({
diff --git a/src/pages/AvatarPage.tsx b/src/pages/AvatarPage.tsx
index d68a7b00a..3d4aaf975 100644
--- a/src/pages/AvatarPage.tsx
+++ b/src/pages/AvatarPage.tsx
@@ -27,20 +27,21 @@ const AvatarPage: FC = () => {
       title: 'Dot indicator',
       code: (
         <div className="flex flex-wrap gap-2">
-          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded status="online" />
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" status="online" />
           <Avatar
             img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+            rounded
             status="busy"
             statusPosition="top-left"
           />
           <Avatar
             img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
-            rounded
             status="offline"
             statusPosition="bottom-right"
           />
           <Avatar
             img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+            rounded
             status="away"
             statusPosition="bottom-left"
           />

From 475a588c0e377fdc014cb7591bec6ed5da14d0ee Mon Sep 17 00:00:00 2001
From: mouracamila <camilapaleo@gmail.com>
Date: Mon, 11 Apr 2022 17:50:52 +0200
Subject: [PATCH 04/10] add the placeholder

---
 src/components/Avatar.tsx | 40 +++++++++++++++++++++++++++++----------
 src/pages/AvatarPage.tsx  |  7 ++++++-
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index ba8251cb9..4e5daf788 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -5,7 +5,7 @@ export type AvatarProps = PropsWithChildren<{
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   rounded?: boolean;
   bordered?: boolean;
-  img: string;
+  img?: string;
   status?: 'offline' | 'online' | 'away' | 'busy';
   statusPosition?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
 }>;
@@ -42,15 +42,35 @@ export const Avatar: React.FC<AvatarProps> = ({
 }) => {
   return (
     <div className="relative">
-      <img
-        className={classNames(sizeClasses[size], {
-          rounded: !rounded,
-          'rounded-full': rounded,
-          'rounded-full p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
-        })}
-        src={img}
-        alt="Rounded avatar"
-      />
+      {img ? (
+        <img
+          className={classNames(sizeClasses[size], {
+            rounded: !rounded,
+            'rounded-full': rounded,
+            'rounded-full p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
+          })}
+          src={img}
+          alt="Rounded avatar"
+        />
+      ) : (
+        <div
+          className={classNames(`relative overflow-hidden bg-gray-100 dark:bg-gray-600`, sizeClasses[size], {
+            rounded: !rounded,
+            'rounded-full': rounded,
+            'rounded-full p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
+          })}
+        >
+          <svg
+            className="absolute -bottom-1 h-auto w-auto text-gray-400"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd"></path>
+          </svg>
+        </div>
+      )}
+
       {status && (
         <span
           className={classNames(
diff --git a/src/pages/AvatarPage.tsx b/src/pages/AvatarPage.tsx
index 3d4aaf975..1d5de9431 100644
--- a/src/pages/AvatarPage.tsx
+++ b/src/pages/AvatarPage.tsx
@@ -21,7 +21,12 @@ const AvatarPage: FC = () => {
     },
     {
       title: 'Placeholder',
-      code: <Avatar />,
+      code: (
+        <div className="flex flex-wrap gap-2">
+          <Avatar />
+          <Avatar rounded />
+        </div>
+      ),
     },
     {
       title: 'Dot indicator',

From 7dea0d8c03da91c1352483b2150ac05177be3269 Mon Sep 17 00:00:00 2001
From: mouracamila <camilapaleo@gmail.com>
Date: Tue, 12 Apr 2022 13:14:57 +0200
Subject: [PATCH 05/10] add avatar text

---
 src/components/Avatar.tsx | 85 +++++++++++++++++++++------------------
 src/pages/AvatarPage.tsx  |  9 ++++-
 2 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 4e5daf788..9bd4922de 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactChildren } from 'react';
 
 export type AvatarProps = PropsWithChildren<{
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -35,51 +35,58 @@ const statusPositionClasses: Record<AvatarProps['statusPosition'] & string, stri
 export const Avatar: React.FC<AvatarProps> = ({
   img,
   status,
+  children,
   statusPosition = 'top-right',
   size = 'md',
   rounded = false,
   bordered = false,
 }) => {
   return (
-    <div className="relative">
-      {img ? (
-        <img
-          className={classNames(sizeClasses[size], {
-            rounded: !rounded,
-            'rounded-full': rounded,
-            'rounded-full p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
-          })}
-          src={img}
-          alt="Rounded avatar"
-        />
-      ) : (
-        <div
-          className={classNames(`relative overflow-hidden bg-gray-100 dark:bg-gray-600`, sizeClasses[size], {
-            rounded: !rounded,
-            'rounded-full': rounded,
-            'rounded-full p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
-          })}
-        >
-          <svg
-            className="absolute -bottom-1 h-auto w-auto text-gray-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
+    <div className="flex items-center space-x-4">
+      <div className="relative">
+        {img ? (
+          <img
+            className={classNames(sizeClasses[size], {
+              rounded: !rounded,
+              'rounded-full': rounded,
+              'rounded-full p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
+            })}
+            src={img}
+            alt="Rounded avatar"
+          />
+        ) : (
+          <div
+            className={classNames(`relative overflow-hidden bg-gray-100 dark:bg-gray-600`, sizeClasses[size], {
+              rounded: !rounded,
+              'rounded-full': rounded,
+              'rounded-full p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
+            })}
           >
-            <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd"></path>
-          </svg>
-        </div>
-      )}
-
-      {status && (
-        <span
-          className={classNames(
-            'absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800',
-            statusClasses[status],
-            statusPositionClasses[statusPosition],
-          )}
-        ></span>
-      )}
+            <svg
+              className="absolute -bottom-1 h-auto w-auto text-gray-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+          </div>
+        )}
+        {status && (
+          <span
+            className={classNames(
+              'absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800',
+              statusClasses[status],
+              statusPositionClasses[statusPosition],
+            )}
+          ></span>
+        )}
+      </div>
+      {children && <div>{children}</div>}
     </div>
   );
 };
diff --git a/src/pages/AvatarPage.tsx b/src/pages/AvatarPage.tsx
index 1d5de9431..a202b0d85 100644
--- a/src/pages/AvatarPage.tsx
+++ b/src/pages/AvatarPage.tsx
@@ -59,7 +59,14 @@ const AvatarPage: FC = () => {
     },
     {
       title: 'Avatar text',
-      code: <Avatar />,
+      code: (
+        <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded>
+          <div className="space-y-1 font-medium dark:text-white">
+            <div>Jese Leos</div>
+            <div className="text-sm text-gray-500 dark:text-gray-400">Joined in August 2014</div>
+          </div>
+        </Avatar>
+      ),
     },
     {
       title: 'User dropdown',

From 3bc2d355088a625d2e0224591bc85853c3fea362 Mon Sep 17 00:00:00 2001
From: mouracamila <camilapaleo@gmail.com>
Date: Tue, 12 Apr 2022 14:27:54 +0200
Subject: [PATCH 06/10] style: code cleaning

---
 src/components/Avatar.tsx | 2 +-
 src/pages/AvatarPage.tsx  | 9 ---------
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 9bd4922de..e48d62190 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { PropsWithChildren, ReactChildren } from 'react';
+import React, { PropsWithChildren } from 'react';
 
 export type AvatarProps = PropsWithChildren<{
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
diff --git a/src/pages/AvatarPage.tsx b/src/pages/AvatarPage.tsx
index a202b0d85..12edb58d6 100644
--- a/src/pages/AvatarPage.tsx
+++ b/src/pages/AvatarPage.tsx
@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { HiEye, HiInformationCircle } from 'react-icons/hi';
 
 import { Avatar } from '../components';
 import { CodeExample, DemoPage } from './DemoPage';
@@ -53,10 +52,6 @@ const AvatarPage: FC = () => {
         </div>
       ),
     },
-    {
-      title: 'Stacked',
-      code: <Avatar />,
-    },
     {
       title: 'Avatar text',
       code: (
@@ -68,10 +63,6 @@ const AvatarPage: FC = () => {
         </Avatar>
       ),
     },
-    {
-      title: 'User dropdown',
-      code: <Avatar />,
-    },
     {
       title: 'Sizing',
       code: (

From cc1beffb41a6146d1a38417cb3fbde3de787f938 Mon Sep 17 00:00:00 2001
From: Nasreddine Bac Ali <nasreddine.bacali95@gmail.com>
Date: Wed, 13 Apr 2022 11:27:40 +0200
Subject: [PATCH 07/10] fix: make arrow prop of Dropdown component much
 understandable

---
 src/components/dropdown/Dropdown.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/dropdown/Dropdown.tsx b/src/components/dropdown/Dropdown.tsx
index 57ed03c7e..00b3721c1 100644
--- a/src/components/dropdown/Dropdown.tsx
+++ b/src/components/dropdown/Dropdown.tsx
@@ -9,10 +9,12 @@ import { DropdownDivider } from './DropdownDivider';
 import { DropdownHeader } from './DropdownHeader';
 
 export type DropdownProps = ButtonProps &
-  Omit<TooltipProps, 'content' | 'style' | 'animation'> & {
+  Omit<TooltipProps, 'content' | 'style' | 'animation' | 'arrow'> & {
     className?: string;
     label: ReactNode;
     inline?: boolean;
+    tooltipArrow?: boolean;
+    arrowIcon?: boolean;
   };
 
 const icons: Record<string, FC<ComponentProps<'svg'>>> = {
@@ -23,13 +25,8 @@ const icons: Record<string, FC<ComponentProps<'svg'>>> = {
 };
 
 const DropdownComponent: FC<DropdownProps> = (props) => {
-  const { children, className, label, inline, ...restProps } = props;
-  const {
-    placement = inline ? 'bottom-start' : 'bottom',
-    arrow = false,
-    trigger = 'click',
-    ...buttonProps
-  } = restProps;
+  const { children, className, label, inline, tooltipArrow, arrowIcon = true, ...restProps } = props;
+  const { placement = inline ? 'bottom-start' : 'bottom', trigger = 'click', ...buttonProps } = restProps;
 
   const Icon = useMemo(() => {
     const [p] = placement.split('-');
@@ -48,12 +45,12 @@ const DropdownComponent: FC<DropdownProps> = (props) => {
       style="auto"
       animation="duration-100"
       placement={placement}
-      arrow={arrow}
+      arrow={tooltipArrow}
       trigger={trigger}
     >
       <TriggerWrapper>
         {label}
-        <Icon className="ml-2 h-4 w-4" />
+        {arrowIcon && <Icon className="ml-2 h-4 w-4" />}
       </TriggerWrapper>
     </Tooltip>
   );

From 59cee65a58623d138098fb3cfcc3c67d2a7e8d19 Mon Sep 17 00:00:00 2001
From: Nasreddine Bac Ali <nasreddine.bacali95@gmail.com>
Date: Wed, 13 Apr 2022 11:28:01 +0200
Subject: [PATCH 08/10] fix: make label prop of Button component as ReactNode

---
 src/components/Button/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 6a81f7d9e..c785ba199 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps, FC } from 'react';
+import { ComponentProps, FC, ReactNode } from 'react';
 import classNames from 'classnames';
 
 type Color = 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple';
@@ -17,6 +17,7 @@ type PositionInGroup = 'start' | 'middle' | 'end';
 export type ButtonProps = Omit<ComponentProps<'button'>, 'color'> & {
   pill?: boolean;
   outline?: boolean;
+  label?: ReactNode;
   color?: Color;
   size?: Size;
   icon?: FC<ComponentProps<'svg'>>;

From a951c06023ccc155cedb951b487f61355856a8b0 Mon Sep 17 00:00:00 2001
From: Nasreddine Bac Ali <nasreddine.bacali95@gmail.com>
Date: Wed, 13 Apr 2022 11:28:20 +0200
Subject: [PATCH 09/10] chore: add avatar user dropdown example

---
 src/pages/AvatarPage.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/pages/AvatarPage.tsx b/src/pages/AvatarPage.tsx
index 12edb58d6..6f4e5d918 100644
--- a/src/pages/AvatarPage.tsx
+++ b/src/pages/AvatarPage.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-import { Avatar } from '../components';
+import { Avatar, Dropdown } from '../components';
 import { CodeExample, DemoPage } from './DemoPage';
 
 const AvatarPage: FC = () => {
@@ -63,6 +63,26 @@ const AvatarPage: FC = () => {
         </Avatar>
       ),
     },
+    {
+      title: 'User dropdown',
+      code: (
+        <Dropdown
+          label={<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded />}
+          arrowIcon={false}
+          inline
+        >
+          <Dropdown.Header>
+            <span className="block text-sm">Bonnie Green</span>
+            <span className="block truncate text-sm font-medium">name@flowbite.com</span>
+          </Dropdown.Header>
+          <Dropdown.Item>Dashboard</Dropdown.Item>
+          <Dropdown.Item>Settings</Dropdown.Item>
+          <Dropdown.Item>Earnings</Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item>Sign out</Dropdown.Item>
+        </Dropdown>
+      ),
+    },
     {
       title: 'Sizing',
       code: (

From 432d9f594f8f5eba3e65a7c464ea49516c4c88bc Mon Sep 17 00:00:00 2001
From: mouracamila <camilapaleo@gmail.com>
Date: Wed, 13 Apr 2022 15:02:05 +0200
Subject: [PATCH 10/10] fix: avatar bordered

---
 src/components/Avatar.tsx | 4 ++--
 src/pages/AvatarPage.tsx  | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index e48d62190..599315b77 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -49,7 +49,7 @@ export const Avatar: React.FC<AvatarProps> = ({
             className={classNames(sizeClasses[size], {
               rounded: !rounded,
               'rounded-full': rounded,
-              'rounded-full p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
+              'p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
             })}
             src={img}
             alt="Rounded avatar"
@@ -59,7 +59,7 @@ export const Avatar: React.FC<AvatarProps> = ({
             className={classNames(`relative overflow-hidden bg-gray-100 dark:bg-gray-600`, sizeClasses[size], {
               rounded: !rounded,
               'rounded-full': rounded,
-              'rounded-full p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
+              'p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered,
             })}
           >
             <svg
diff --git a/src/pages/AvatarPage.tsx b/src/pages/AvatarPage.tsx
index 6f4e5d918..58090172b 100644
--- a/src/pages/AvatarPage.tsx
+++ b/src/pages/AvatarPage.tsx
@@ -16,7 +16,12 @@ const AvatarPage: FC = () => {
     },
     {
       title: 'Bordered Avatar',
-      code: <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" bordered />,
+      code: (
+        <div className="flex flex-wrap gap-2">
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded bordered />
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" bordered />
+        </div>
+      ),
     },
     {
       title: 'Placeholder',