Add README.md to ProfileCard component directory

package.json

@@ -18,5 +18,8 @@
   },
   "dependencies": {
     "@vercel/analytics": "^2.0.1"
+  },
+  "engines": {
+    "node": ">=20.9.0"
   }
 }

packages/client/package.json

@@ -1,41 +1,44 @@
 {
-    "name": "@intellicircle/client",
-    "version": "1.0.0",
-    "private": true,
-    "scripts": {
-        "dev": "next dev",
-        "build": "next build",
-        "start": "next start",
-        "lint": "next lint",
-        "analyze": "set ANALYZE=true && next build"
-    },
-    "dependencies": {
-        "@tanstack/react-query": "^5.59.0",
-        "@vercel/analytics": "^2.0.1",
-        "axios": "^1.13.6",
-        "clsx": "^2.1.1",
-        "framer-motion": "^12.34.3",
-        "lucide-react": "^0.453.0",
-        "next": "^16.2.4",
-        "posthog-js": "^1.356.1",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "react-hot-toast": "^2.6.0",
-        "react-virtuoso": "^4.18.1",
-        "tailwind-merge": "^2.6.1",
-        "web-vitals": "^5.2.0",
-        "zustand": "^4.5.2"
-    },
-    "devDependencies": {
-        "@next/bundle-analyzer": "^16.2.2",
-        "@types/node": "^20",
-        "@types/react": "^18",
-        "@types/react-dom": "^18",
-        "autoprefixer": "^10.4.27",
-        "eslint": "^8",
-        "eslint-config-next": "^16.2.4",
-        "postcss": "^8.5.6",
-        "tailwindcss": "^3.4.19",
-        "typescript": "^5"
-    }
+  "name": "@intellicircle/client",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "analyze": "set ANALYZE=true && next build"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.59.0",
+    "@vercel/analytics": "^2.0.1",
+    "axios": "^1.13.6",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.34.3",
+    "lucide-react": "^0.453.0",
+    "next": "^16.2.4",
+    "posthog-js": "^1.356.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hot-toast": "^2.6.0",
+    "react-virtuoso": "^4.18.1",
+    "tailwind-merge": "^2.6.1",
+    "web-vitals": "^5.2.0",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@next/bundle-analyzer": "^16.2.2",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^8",
+    "eslint-config-next": "^16.2.4",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5"
+  },
+  "engines": {
+    "node": ">=20.9.0"
+  }
 }

packages/client/src/components/ProfileCard/README.md

@@ -0,0 +1,45 @@
+# ProfileCard Component
+
+A reusable component for displaying a user's profile information, including avatar, name, status, and optional stats.
+
+## Usage
+
+```tsx
+import ProfileCard from './ProfileCard';
+
+// Example usage
+<ProfileCard 
+  username="johndoe"
+  initials="JD"
+  status="online"
+  stats={{ connections: 50, roomsJoined: 5 }}
+/>
+```
+
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `username` | `string` | The user's display name. |
+| `initials` | `string` | The initials to display in the avatar (if no image). |
+| `status` | `'online' \| 'offline' \| 'away'` | The user's online status. |
+| `stats` | `{ connections?: number; roomsJoined?: number; }` | Optional statistics to display. |
+| `avatarUrl` | `string` | Optional URL to the user's avatar image. If not provided, initials are shown. |
+
+## Example
+
+```tsx
+<ProfileCard 
+  username="Jane Doe"
+  initials="JD"
+  status="online"
+  avatarUrl="https://example.com/avatar.jpg"
+  stats={{ connections: 120, roomsJoined: 12 }}
+/>
+```
+
+## Notes
+
+- The component uses Tailwind CSS for styling.
+- The avatar displays the user's image if `avatarUrl` is provided; otherwise, it shows the initials on a colored background.
+- The status dot is color-coded: green for online, gray for offline, yellow for away.

vercel.json

@@ -0,0 +1,10 @@
+{
+  "version": 2,
+  "root": "packages/client",
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@vercel/next.js"
+    }
+  ]
+}