From 0d198afe973092c4cdcad873fe7d57c14f117bc0 Mon Sep 17 00:00:00 2001
From: jubitjohn <jubitjohn1@gmail.com>
Date: Mon, 12 Jun 2023 23:33:04 +0530
Subject: [PATCH] Component created

---
 .../components/pages/gallery/AvatarIcon.tsx   | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 apps/photos/src/components/pages/gallery/AvatarIcon.tsx

diff --git a/apps/photos/src/components/pages/gallery/AvatarIcon.tsx b/apps/photos/src/components/pages/gallery/AvatarIcon.tsx
new file mode 100644
index 000000000..05ac8a8f2
--- /dev/null
+++ b/apps/photos/src/components/pages/gallery/AvatarIcon.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface CircleProps {
+    letter: string;
+    color: string;
+    size: number;
+}
+
+const Circle: React.FC<CircleProps> = ({ letter, color, size }) => {
+    const circleStyle = {
+        width: `${size}px`,
+        height: `${size}px`,
+        backgroundColor: color,
+        borderRadius: '50%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: '#fff',
+        fontWeight: 'bold',
+        fontSize: `${Math.floor(size / 2)}px`,
+    };
+
+    return <div style={circleStyle}>{letter}</div>;
+};
+
+export default Circle;