extracted templates, extracted strings for templates

src/templates/castform/Castform.js

@@ -234,10 +234,10 @@ const Castform = () => {
       </div>
     );
 
-  const ExtraItem = ({ key, value }) => (
-    <div className="px-5 my-2">
-      <h6 className="text-xs font-bold">{key}</h6>
-      <div className="text-sm">{value}</div>
+  const ExtraItem = x => (
+    <div key={x.id} className="px-5 my-2">
+      <h6 className="text-xs font-bold">{x.key}</h6>
+      <div className="text-sm">{x.value}</div>
     </div>
   );
 

src/templates/gengar/Gengar.js

@@ -215,7 +215,7 @@ const Gengar = () => {
     );
 
   const ExtraItem = x => (
-    <div key={x.key} className="text-sm my-1">
+    <div key={x.id} className="text-sm my-1">
       <h6 className="text-xs font-bold">{x.key}</h6>
       <h6>{x.value}</h6>
     </div>

src/templates/index.js

@@ -0,0 +1,27 @@
+import Onyx, { Image as OnyxPreview } from './onyx';
+import Pikachu, { Image as PikachuPreview } from './pikachu';
+import Gengar, { Image as GengarPreview } from './gengar';
+import Castform, { Image as CastformPreview } from './castform';
+
+export default [
+  {
+    key: 'onyx',
+    component: Onyx,
+    preview: OnyxPreview,
+  },
+  {
+    key: 'pikachu',
+    component: Pikachu,
+    preview: PikachuPreview,
+  },
+  {
+    key: 'gengar',
+    component: Gengar,
+    preview: GengarPreview,
+  },
+  {
+    key: 'castform',
+    component: Castform,
+    preview: CastformPreview,
+  },
+];

src/templates/onyx/Onyx.js

@@ -211,7 +211,7 @@ const Onyx = () => {
     );
 
   const ExtraItem = x => (
-    <tr key={x.key}>
+    <tr key={x.id}>
       <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
       <td className="border px-4 py-2 text-sm">{x.value}</td>
     </tr>

src/templates/pikachu/Pikachu.js

@@ -120,7 +120,7 @@ const Pikachu = () => {
     );
 
   const ExtraItem = x => (
-    <div key={x.key} className="text-sm my-1">
+    <div key={x.id} className="text-sm my-1">
       <h6 className="text-xs font-bold">{x.key}</h6>
       <h6 className="">{x.value}</h6>
     </div>