make doc cuter

powerhome · Oct 30, 2024 · 1bd39af · 1bd39af
1 parent a0acb2e
commit 1bd39af
Showing 1 changed file with 35 additions and 15 deletions.
diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/GroupHover.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Examples/GroupHover.tsx
@@ -4,7 +4,11 @@ import React from 'react'
 
 import {
   Body,
-  Card
+  Card,
+  Flex,
+  FlexItem,
+  Icon,
+  User
 } from 'playbook-ui'
 
 import Example from '../Templates/Example'
@@ -22,20 +26,36 @@ const GroupHover = ({ example }: {example: string}) => (
       example={example}
       title="Group Hover"
   >
-    <Card groupHover>
-      <Body
-          groupHover 
-          hover={{ scale: "lg"}}
-          text="If the card is hovered, I'm hovered too!"
-      />
-      <Body
-          paddingY="lg"
-          text="I don't have any hover effect on me"
-      />
-      <Body
-          hover={{ scale: "lg"}}
-          text="I need to be hovered over directly"
-      />
+    <Card>
+        <Flex justify="between">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="horizontal"
+            title="Remodeling Consultant"
+        />
+        <Card
+            padding="xs"
+            borderNone
+            borderRadius="rounded"
+            hover={{ background: "success_subtle" }}
+        >
+        <Flex>
+          <FlexItem alignSelf="center">
+            More Info
+          </FlexItem>
+          <FlexItem alignSelf="center">
+            <Icon
+              fixedWidth
+              icon="arrow-right"
+              pull="right"
+              size="2x"
+            />
+          </FlexItem>
+        </Flex>
+        </Card>
+        </Flex>
     </Card>
   </Example>
 )