organizing type structure

src/components/Card/Card.d.ts

@@ -1,8 +0,0 @@
-declare namespace CardInfo {
-    export interface Card {
-        gemValue: string
-        tier: number
-        points?: number
-        cost: any
-    }
-}

src/components/Card/Card.tsx

@@ -1,6 +1,6 @@
-/// <reference path="Card.d.ts" />
+/// <reference path="../../util/main.d.ts" />
 
-export default function Card(data: CardInfo.Card) {
+export default function Card(data: Universals.Card) {
     return (
         <div className="card">
             <p>{data.gemValue}</p>

src/components/Gameboard/Gameboard.tsx

@@ -1,13 +1,9 @@
 /// <reference path="Gameboard.d.ts" />
-/// <reference path="../Card/Card.d.ts" />
+/// <reference path="../../util/main.d.ts" />
-
-import { useState, useEffect } from "react"
 
 export default function Gameboard() {
-    const [cards, setCards] = useState();
+    const exampleCard: Universals.Card = {
-
+        gemValue: Universals.GemValue.Ruby,
-    const exampleCard: CardInfo.Card = {
-        gemValue: "ruby",
         tier: 1,
         cost: 5
     }

src/util/main.d.ts

@@ -0,0 +1,22 @@
+declare namespace Universals {
+    export interface Card {
+        gemValue: GemValue
+        tier: number
+        points?: number
+        cost: any
+    }
+
+    export interface Nobles {
+        points: 3
+
+    }
+
+    export enum GemValue {
+        Ruby,
+        Sapphire,
+        Emerald,
+        Diamond,
+        Onyx,
+        Gol,
+    }
+}