From c7d3cff7ae3cdd67577ffbbee50eedc9e36f2756 Mon Sep 17 00:00:00 2001
From: Paul Cramer <paulccramer@gmail.com>
Date: Thu, 12 Dec 2024 09:45:42 -0800
Subject: [PATCH] docs: Update Identity component preview (#1717)

---
 .changeset/spotty-wasps-warn.md               |  5 ++
 .../components/landing/ComponentPreview.tsx   | 10 ++--
 .../components/landing/IdentityCardDemo.tsx   | 32 +++++++++++
 site/docs/components/landing/IdentityDemo.tsx | 53 -------------------
 4 files changed, 42 insertions(+), 58 deletions(-)
 create mode 100644 .changeset/spotty-wasps-warn.md
 create mode 100644 site/docs/components/landing/IdentityCardDemo.tsx
 delete mode 100644 site/docs/components/landing/IdentityDemo.tsx

diff --git a/.changeset/spotty-wasps-warn.md b/.changeset/spotty-wasps-warn.md
new file mode 100644
index 0000000000..623bcfc24d
--- /dev/null
+++ b/.changeset/spotty-wasps-warn.md
@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+-**docs**: Updated `Identity` component preview. By @cpcramer #1717
diff --git a/site/docs/components/landing/ComponentPreview.tsx b/site/docs/components/landing/ComponentPreview.tsx
index f0246eee20..376d640b69 100644
--- a/site/docs/components/landing/ComponentPreview.tsx
+++ b/site/docs/components/landing/ComponentPreview.tsx
@@ -8,7 +8,7 @@ import { getHighlightedCode } from './getHighlightedCode.tsx';
 // Demo components and code snippets
 import CheckoutDemo, { checkoutDemoCode } from './CheckoutDemo.tsx';
 import FundDemo, { fundDemoCode } from './FundDemo.tsx';
-import IdentityDemo, { identityDemoCode } from './IdentityDemo.tsx';
+import IdentityCardDemo, { identityCardDemoCode } from './IdentityCardDemo.tsx';
 import NftMintCardDemo, { nftMintCardDemoCode } from './NftMintCardDemo.tsx';
 import SwapDemo, { swapDemoCode } from './SwapDemo.tsx';
 import TransactionDemo, { transactionDemoCode } from './TransactionDemo.tsx';
@@ -60,11 +60,11 @@ const components: Component[] = [
     description: 'Fund wallets with a debit card or a coinbase account.',
   },
   {
-    name: 'Identity',
-    component: IdentityDemo,
-    code: identityDemoCode,
+    name: 'Identity Card',
+    component: IdentityCardDemo,
+    code: identityCardDemoCode,
     description:
-      'Display the Basename, avatar, and address associated with a wallet.',
+      'Display the Basename, avatar, address, and social media links associated with a wallet.',
   },
 ];
 
diff --git a/site/docs/components/landing/IdentityCardDemo.tsx b/site/docs/components/landing/IdentityCardDemo.tsx
new file mode 100644
index 0000000000..db70757c52
--- /dev/null
+++ b/site/docs/components/landing/IdentityCardDemo.tsx
@@ -0,0 +1,32 @@
+import { IdentityCard } from '@coinbase/onchainkit/identity';
+import { base } from 'viem/chains';
+import App from '../App.tsx';
+
+export const identityCardDemoCode = `
+  import { IdentityCard } from '@coinbase/onchainkit/identity';
+  import { base } from 'viem/chains';
+
+  function IdentityCardDemo() {
+    return (
+      <IdentityCard
+        address="0x849151d7D0bF1F34b70d5caD5149D28CC2308bf1"
+        chain={base}
+        schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
+      />
+    )
+  }
+`;
+
+function IdentityCardDemo() {
+  return (
+    <App>
+      <IdentityCard
+        address="0x849151d7D0bF1F34b70d5caD5149D28CC2308bf1"
+        chain={base}
+        schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
+      />
+    </App>
+  );
+}
+
+export default IdentityCardDemo;
diff --git a/site/docs/components/landing/IdentityDemo.tsx b/site/docs/components/landing/IdentityDemo.tsx
deleted file mode 100644
index bb7d3a341f..0000000000
--- a/site/docs/components/landing/IdentityDemo.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import {
-  Address,
-  Avatar,
-  Badge,
-  Identity,
-  Name,
-} from '@coinbase/onchainkit/identity';
-import App from '../App.tsx';
-
-export const identityDemoCode = `
-  import {
-    Avatar,
-    Identity,
-    Name,
-    Badge,
-    Address
-  } from '@coinbase/onchainkit/identity';
-
-  function IdentityDemo() {
-    return (
-      <Identity
-        address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
-        schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
-      >
-        <Avatar />
-        <Name>
-          <Badge />
-        </Name>
-        <Address />
-      </Identity>
-    )
-  }
-  `;
-
-function IdentityDemo() {
-  return (
-    <App>
-      <Identity
-        schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
-        address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
-        className="rounded-lg bg-gray-100 px-4 py-2 dark:bg-gray-900"
-      >
-        <Avatar>
-          <Badge className="badge" />
-        </Avatar>
-        <Name />
-        <Address />
-      </Identity>
-    </App>
-  );
-}
-
-export default IdentityDemo;