From e8074f5e0377a1d0da788cd4d37a52dba3f134c6 Mon Sep 17 00:00:00 2001
From: faizan ali <iamfaizan073@gmail.com>
Date: Fri, 22 Mar 2024 20:36:33 +0500
Subject: [PATCH 1/2] Avatar Component

---
 public/assets/images/profile.jpg              | Bin 0 -> 16593 bytes
 .../components/components-avatar/1-dark.html  |   7 ++++++
 public/components/components-avatar/1.html    |   6 +++++
 .../components/components-avatar/2-dark.html  |  15 ++++++++++++
 public/components/components-avatar/2.html    |  16 ++++++++++++
 src/data/components/components-avatar.mdx     |  23 ++++++++++++++++++
 6 files changed, 67 insertions(+)
 create mode 100644 public/assets/images/profile.jpg
 create mode 100644 public/components/components-avatar/1-dark.html
 create mode 100644 public/components/components-avatar/1.html
 create mode 100644 public/components/components-avatar/2-dark.html
 create mode 100644 public/components/components-avatar/2.html
 create mode 100644 src/data/components/components-avatar.mdx

diff --git a/public/assets/images/profile.jpg b/public/assets/images/profile.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0c0224d96febd58de4a350eb8c3ef019880f82bc
GIT binary patch
literal 16593
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

literal 0
HcmV?d00001

diff --git a/public/components/components-avatar/1-dark.html b/public/components/components-avatar/1-dark.html
new file mode 100644
index 0000000..e224002
--- /dev/null
+++ b/public/components/components-avatar/1-dark.html
@@ -0,0 +1,7 @@
+<!-- Basic -->
+<div class="flex flex-wrap items-center justify-center gap-2">
+    <img class="h-20 w-20 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+    <img class="h-16 w-16 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+    <img class="h-12 w-12 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+</div>
+
diff --git a/public/components/components-avatar/1.html b/public/components/components-avatar/1.html
new file mode 100644
index 0000000..6c5d967
--- /dev/null
+++ b/public/components/components-avatar/1.html
@@ -0,0 +1,6 @@
+<!-- Basic -->
+<div class="flex flex-wrap items-center justify-center gap-2">
+    <img class="h-20 w-20 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+    <img class="h-16 w-16 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+    <img class="h-12 w-12 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+</div>
\ No newline at end of file
diff --git a/public/components/components-avatar/2-dark.html b/public/components/components-avatar/2-dark.html
new file mode 100644
index 0000000..95f687f
--- /dev/null
+++ b/public/components/components-avatar/2-dark.html
@@ -0,0 +1,15 @@
+<!-- Indicator -->
+<div class="flex flex-wrap items-center justify-center gap-2">
+  <span class="relative h-20 w-20">
+      <img class="h-20 w-20 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+      <span class="absolute bottom-0 h-7 w-7 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
+  </span>
+  <span class="relative h-16 w-16">
+      <img class="h-16 w-16 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg"  alt="img" />
+      <span class="absolute bottom-0 h-6 w-6 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
+  </span>
+  <span class="relative h-12 w-12">
+      <img class="h-12 w-12 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+      <span class="absolute bottom-0 h-4 w-4 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
+  </span>
+</div>
diff --git a/public/components/components-avatar/2.html b/public/components/components-avatar/2.html
new file mode 100644
index 0000000..44b70e2
--- /dev/null
+++ b/public/components/components-avatar/2.html
@@ -0,0 +1,16 @@
+<!-- Indicator -->
+
+<div class="flex flex-wrap items-center justify-center gap-2">
+    <span class="relative h-20 w-20">
+        <img class="h-20 w-20 overflow-hidden rounded-full object-cover" src="https://source.unsplash.com/120x120/?portrait" alt="img" />
+        <span class="absolute bottom-0 h-7 w-7 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
+    </span>
+    <span class="relative h-16 w-16">
+        <img class="h-16 w-16 overflow-hidden rounded-full object-cover" src="https://source.unsplash.com/80x80/?portrait" alt="img" />
+        <span class="absolute bottom-0 h-6 w-6 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
+    </span>
+    <span class="relative h-12 w-12">
+        <img class="h-12 w-12 overflow-hidden rounded-full object-cover" src="https://source.unsplash.com/40x40/?portrait" alt="img" />
+        <span class="absolute bottom-0 h-4 w-4 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
+    </span>
+</div>
diff --git a/src/data/components/components-avatar.mdx b/src/data/components/components-avatar.mdx
new file mode 100644
index 0000000..a054460
--- /dev/null
+++ b/src/data/components/components-avatar.mdx
@@ -0,0 +1,23 @@
+---
+title: Avatar
+category: components
+container: p-8 flex items-center justify-center gap-4 sm:gap-8
+seo:
+  title: Avatar Components
+  description: Avatar components in Tailwind | LangUI
+components:
+  1:
+    title: Basic
+    dark: true
+  2:
+    title: Indicator
+    dark: true
+
+---
+
+# Avatar Components
+
+<ComponentsList
+  componentsData={componentsData}
+  componentContainer={componentContainer}
+/>

From 0a497d57b0b4711e3102defec157a40e6d7134b4 Mon Sep 17 00:00:00 2001
From: faizan ali <iamfaizan073@gmail.com>
Date: Sat, 23 Mar 2024 00:01:40 +0500
Subject: [PATCH 2/2] avatar profile image

---
 public/components/components-avatar/2.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/components/components-avatar/2.html b/public/components/components-avatar/2.html
index 44b70e2..4e441d5 100644
--- a/public/components/components-avatar/2.html
+++ b/public/components/components-avatar/2.html
@@ -2,15 +2,15 @@
 
 <div class="flex flex-wrap items-center justify-center gap-2">
     <span class="relative h-20 w-20">
-        <img class="h-20 w-20 overflow-hidden rounded-full object-cover" src="https://source.unsplash.com/120x120/?portrait" alt="img" />
+        <img class="h-20 w-20 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
         <span class="absolute bottom-0 h-7 w-7 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
     </span>
     <span class="relative h-16 w-16">
-        <img class="h-16 w-16 overflow-hidden rounded-full object-cover" src="https://source.unsplash.com/80x80/?portrait" alt="img" />
+        <img class="h-16 w-16 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
         <span class="absolute bottom-0 h-6 w-6 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
     </span>
     <span class="relative h-12 w-12">
-        <img class="h-12 w-12 overflow-hidden rounded-full object-cover" src="https://source.unsplash.com/40x40/?portrait" alt="img" />
+        <img class="h-12 w-12 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
         <span class="absolute bottom-0 h-4 w-4 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
     </span>
 </div>