chore: in react ui, clean up welcome to factor out common Tile

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/page/welcome/Tile.tsx

@@ -0,0 +1,29 @@
+import type { PropsWithChildren, ReactNode } from "react"
+
+import {
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Flex,
+} from "@patternfly/react-core"
+
+type Props = PropsWithChildren<{
+  title: ReactNode
+  body: ReactNode
+}>
+
+export default function Tile({ title, body, children }: Props) {
+  return (
+    <Card isLarge>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardBody>{body}</CardBody>
+      <CardFooter>
+        <Flex>{children}</Flex>
+      </CardFooter>
+    </Card>
+  )
+}

pdl-live-react/src/page/welcome/tiles/Demos.tsx

@@ -1,34 +1,22 @@
 import { Link } from "react-router"
-import {
-  Button,
-  Card,
-  CardBody,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  Flex,
-} from "@patternfly/react-core"
+import { Button } from "@patternfly/react-core"
 
+import Tile from "../Tile"
 import demos from "../../../demos/demos"
 
 export default function Demos() {
   return (
-    <Card isLarge>
-      <CardHeader>
-        <CardTitle>View a Demo</CardTitle>
-      </CardHeader>
-      <CardBody>You may view one of the built-in PDL demos.</CardBody>
-      <CardFooter>
-        <Flex>
-          {demos.map((demo) => (
-            <Button key={demo.name} isInline variant="link">
-              <Link to={"/demos/" + encodeURIComponent(demo.name)}>
-                {demo.name}
-              </Link>
-            </Button>
-          ))}
-        </Flex>
-      </CardFooter>
-    </Card>
+    <Tile
+      title="View a Demo"
+      body="You may view one of the built-in PDL demos."
+    >
+      {demos.map((demo) => (
+        <Button key={demo.name} isInline variant="link">
+          <Link to={"/demos/" + encodeURIComponent(demo.name)}>
+            {demo.name}
+          </Link>
+        </Button>
+      ))}
+    </Tile>
   )
 }

pdl-live-react/src/page/welcome/tiles/MyTraces.tsx

@@ -1,38 +1,22 @@
 import { Link } from "react-router"
-import {
-  Button,
-  Card,
-  CardBody,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  Flex,
-} from "@patternfly/react-core"
+import { Button } from "@patternfly/react-core"
 
+import Tile from "../Tile"
 import { getMyTraces } from "../../MyTraces"
 
 export default function MyTraces() {
   const myTraces = getMyTraces()
 
   return (
-    myTraces.length > 0 && (
-      <Card isLarge>
-        <CardHeader>
-          <CardTitle>My Traces</CardTitle>
-        </CardHeader>
-        <CardBody>
-          You may view one of your previously uploaded traces.
-        </CardBody>
-        <CardFooter>
-          <Flex>
-            {myTraces.map(({ title, filename }) => (
-              <Button key={filename} isInline variant="link">
-                <Link to={"/my/" + encodeURIComponent(title)}>{title}</Link>
-              </Button>
-            ))}
-          </Flex>
-        </CardFooter>
-      </Card>
-    )
+    <Tile
+      title="My Traces"
+      body="You may view one of your previously uploaded traces."
+    >
+      {myTraces.map(({ title, filename }) => (
+        <Button key={filename} isInline variant="link">
+          <Link to={"/my/" + encodeURIComponent(title)}>{title}</Link>
+        </Button>
+      ))}
+    </Tile>
   )
 }

pdl-live-react/src/page/welcome/tiles/Upload.tsx

@@ -1,28 +1,17 @@
 import { Link } from "react-router"
-import {
-  Button,
-  Card,
-  CardBody,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@patternfly/react-core"
+import { Button } from "@patternfly/react-core"
+
+import Tile from "../Tile"
 
 export default function Upload() {
   return (
-    <Card isLarge>
-      <CardHeader>
-        <CardTitle>Upload Trace</CardTitle>
-      </CardHeader>
-      <CardBody>
-        You may upload a trace from your computer to visualize the program
-        execution.
-      </CardBody>
-      <CardFooter>
-        <Button isInline variant="link">
-          <Link to="/upload">Choose Trace File</Link>
-        </Button>
-      </CardFooter>
-    </Card>
+    <Tile
+      title="Upload Trace"
+      body="You may upload a trace from your computer to visualize the program execution."
+    >
+      <Button isInline variant="link">
+        <Link to="/upload">Choose Trace File</Link>
+      </Button>
+    </Tile>
   )
 }