Set up addon store

src/AddonStore.tsx

@@ -0,0 +1,29 @@
+import AddonList from "./components/AddonStore/AddonList"
+import { AddonCardProps } from "./components/AddonStore/AddonCard"
+import plugins from "./Plugins"
+
+function AddonStore() {
+  const installHandler = (e: any) => {
+    console.log(e.target)
+  }
+
+  console.log(plugins)
+
+  const cards: AddonCardProps[] = [
+    ...plugins,
+    { name: 'Test Addon', description: "Lorem ipsum dolor sit amet", onInstall: installHandler, installed: false },
+    // { name: 'Test Addon', description: "Lorem ipsum dolor sit amet", onInstall: installHandler, installed: true },
+  ];
+
+  return (
+    <div className="addon-store-wrapper">
+      <h1>Addon Store</h1>
+
+      <AddonList items={cards} />
+
+      <a className='addon-store-link' href="/">Calculator</a>
+    </div>
+  )
+}
+
+export default AddonStore

src/Calculator.tsx

@@ -166,6 +166,8 @@ function Calculator() {
         <CalculatorPreview value={calc.num ? calc.num : calc.res} />
         <ButtonList items={buttons} />
       </div>
+
+      <a className='addon-store-link' href="/addons">Addon Store</a>
     </div>
   )
 }

src/Plugins.ts

@@ -0,0 +1,6 @@
+import TestPlugin from './Plugins/TestPlugin/plugin.json';
+import ExamplePlugin from './Plugins/ExamplePlugin/plugin.json';
+
+let plugins = [TestPlugin, ExamplePlugin];
+
+export default plugins;

src/Plugins/ExamplePlugin/plugin.json

@@ -0,0 +1,5 @@
+{
+    "name": "ExamplePlugin",
+    "description": "Amet consectetur adipisicing elit",
+    "path": "/ExamplePlugin"
+}

src/Plugins/TestPlugin/plugin.json

@@ -0,0 +1,5 @@
+{
+    "name": "TestPlugin",
+    "description": "Lorem ipsum dolor sit",
+    "path": "/TestPlugin"
+}

src/components/AddonStore/AddonCard.tsx

@@ -0,0 +1,18 @@
+export interface AddonCardProps {
+  name: string;
+  description?: string;
+  installed: boolean;
+  onInstall: (e: any) => void;
+}
+
+export default function AddonCard({ name, description, installed = false, onInstall }: AddonCardProps) {
+  return (
+    <div className="addon-card">
+      <div className="addon-name">{name}</div>
+      {description && <div className="addon-description">{description}</div>}
+      {!installed && <button className="install-btn" onClick={onInstall}>Install</button>}
+      {installed && <button className="install-btn" disabled>Installed</button>}
+      
+    </div>
+  )
+}

src/components/AddonStore/AddonList.tsx

@@ -0,0 +1,16 @@
+import AddonCard, { AddonCardProps } from "./AddonCard";
+
+interface AddonListProps {
+  items: AddonCardProps[];
+}
+
+export default function AddonList({items, ...rest}: AddonListProps) {
+  return (
+    <div className="addon-list" {...rest}>
+      {items.map((item) => {
+        return <AddonCard key={item.name} {...item} />
+      })}
+        
+    </div>
+  )
+}