Merge pull request #19 from casrpg/cca/add-basic-styles-to-npc-generator

Add basic styles to npc generator
casrpg · Oct 25, 2024 · 85a3ff2 · 85a3ff2
2 parents af403c6 + c757902
commit 85a3ff2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 23 deletions.
diff --git a/app/src/features/NPCGenerator.tsx b/app/src/features/NPCGenerator.tsx
@@ -1,4 +1,9 @@
 import React, { useState } from 'react'
+import { Heading } from '../lcars/Heading'
+import { List } from '../lcars/List'
+import { ListItem } from '../lcars/ListItem'
+import { ButtonBar } from '../lcars/ButtonBar'
+import { Button } from '../lcars/Button'
 interface NPC {
   name: string
   occupation: string
@@ -20,24 +25,19 @@ export const NPCGenerator: React.FC = () => {
   }
 
   return (
-    <div className="lcars-panel">
-      <h2 className="mb-4 text-2xl font-bold lcars-header">NPC Generator</h2>
-      <div className="lcars-content">
-        <button
-          onClick={generateNPC}
-          className="mb-4 lcars-button"
-        >
-          Generate NPC
-        </button>
-        {npc && (
-          <div className="mt-4">
-            <div className="lcars-element">{npc.name}</div>
-            <div className="lcars-element">Occupation: {npc.occupation}</div>
-            <div className="lcars-element">Skills: {npc.skills.join(', ')}</div>
-            <div className="lcars-element">Equipment: {npc.equipment.join(', ')}</div>
-          </div>
-        )}
-      </div>
-    </div>
+    <>
+      <Heading align="left">NPC Generator</Heading>
+      <ButtonBar alignment="space-between">
+        <Button color="orange" onClick={generateNPC}>Generate NPC</Button>
+      </ButtonBar>
+      {npc && (
+        <List>
+          <ListItem color="orange" >Name: {npc.name}</ListItem>
+          <ListItem color="cyan">Occupation: <span className="cyan">{npc.occupation}</span></ListItem>
+          <ListItem color="green">Skills: <span className="green">{npc.skills.join(', ')}</span></ListItem>
+          <ListItem color="pale-orange">Equipment: <span className="pale-orange">{npc.equipment.join(', ')}</span></ListItem>
+        </List>
+      )}
+    </>
   )
 }
diff --git a/app/src/features/PlanetDecoder.tsx b/app/src/features/PlanetDecoder.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Heading } from '../lcars/Heading'
 import './PlanetDecoder.css'
 import { ButtonBar } from '../lcars/ButtonBar'
-import Button from '../lcars/Button'
+import { Button } from '../lcars/Button'
 import { List } from '../lcars/List'
 import { ListItem } from '../lcars/ListItem'
 interface PlanetInfo {

diff --git a/app/src/lcars/Button.tsx b/app/src/lcars/Button.tsx
@@ -9,7 +9,7 @@ interface ButtonProps {
   onClick?: () => void
 }
 
-const Button: FC<PropsWithChildren<ButtonProps>> = ({ color, className, onClick, children }) => {
+export const Button: FC<PropsWithChildren<ButtonProps>> = ({ color, className, onClick, children }) => {
   return (
         <a
             role="button"
@@ -25,5 +25,3 @@ const Button: FC<PropsWithChildren<ButtonProps>> = ({ color, className, onClick,
         </a>
   )
 }
-
-export default Button