From 229ddc5ef305320228ff89ffa84e60a6d54f4802 Mon Sep 17 00:00:00 2001
From: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local>
Date: Tue, 12 Dec 2023 10:12:12 -0700
Subject: [PATCH] use empty state component

---
 .../src/examples/cardPreviews/emptystate.js   | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/aries-site/src/examples/cardPreviews/emptystate.js b/aries-site/src/examples/cardPreviews/emptystate.js
index b53ff6fd0..52d7343b2 100644
--- a/aries-site/src/examples/cardPreviews/emptystate.js
+++ b/aries-site/src/examples/cardPreviews/emptystate.js
@@ -1,18 +1,16 @@
 import React from 'react';
-import { Box, Button, Heading, Paragraph } from 'grommet';
+import { EmptyState } from 'aries-core';
+import { Button } from 'grommet';
 import { CircleInformation } from 'grommet-icons';
 
-export const EmptyStatePreview = () => (
-  <Box gap="small" align="center" flex={false}>
-    <CircleInformation />
-    <Box align="center" gap="xsmall">
-      <Heading margin="none" size='small' level={4}>
-        No items exist
-      </Heading>
-      <Paragraph margin="none" textAlign="center">
-        Error message will be displayed here.
-      </Paragraph>
-    </Box>
-    <Button label="Action item" primary />
-  </Box>
-);
+export const EmptyStatePreview = () => {
+  return (
+    <EmptyState
+      title="Empty state title"
+      description="Empty state message will be displayed here."
+      icon={<CircleInformation />}
+      actions={<Button tabIndex={-1} label="action item" primary />}
+      level={3}
+    />
+  );
+};