Add paints collection page.

src/App.js

@@ -46,7 +46,7 @@ import EquipmentPage from './Pages/Radio/equipmentPage';
 import PlamoMain from './Pages/Plamo/PlamoMain'
 
 import { languages, getLanguage } from './Language/Language';
-import { japaneseRoutes, plamoBlogRoutes, plamoEquipmentRoutes, plamoShowcaseGundamRoutes, plamoShowcaseMilitairyAirplanesRoutes, programmingLanguageRoutes } from './Routers';
+import { japaneseRoutes, plamoBlogRoutes, plamoEquipmentRoutes, plamoPaintRoutes, plamoShowcaseGundamRoutes, plamoShowcaseMilitairyAirplanesRoutes, programmingLanguageRoutes } from './Routers';
 
 function App() {
   const language = getLanguage();
@@ -131,6 +131,7 @@ function App() {
           {/* Plamo */}
           {plamoBlogRoutes}
           {plamoEquipmentRoutes}
+          {plamoPaintRoutes}
           {plamoShowcaseGundamRoutes}
           {plamoShowcaseMilitairyAirplanesRoutes}
 

src/Language/LanguageStrings.js

@@ -4,11 +4,16 @@ const languageStrings = {
     en: {
         // Common
         and: 'and',
+        colour: 'colour',
         copy: 'copy',
         date: 'date',
         hour: 'hour(s)',
+        identifier: 'identifier',
         on: 'on',
         name: 'name',
+        stock: 'stock',
+        total: 'total',
+        type: 'type',
         // Titles
         japan: 'Japan',
         japanese: 'Japanese',
@@ -77,11 +82,16 @@ const languageStrings = {
     nl: {
         // Common
         and: 'en',
+        colour: 'kleur',
         copy: 'kopieer',
         date: 'datum',
         hour: 'uur',
+        identifier: 'identificatiecode',
         on: 'op',
         name: 'naam',
+        stock: 'voorraad',
+        total: 'totaal',
+        type: 'type',
         // Titles
         japan: 'Japan',
         japanese: 'Japans',

src/Pages/Plamo/en/main.md

@@ -16,6 +16,12 @@ Building and painting plastic scale models and mecha figures is one of my hobbie
 
 ---
 
+### Paints
+
+* [Paint collection](./paints)
+
+---
+
 ### Equipment
 
 * [Airbrush booth](./equipment/airbrush-cabine)

src/Pages/Plamo/nl/main.md

@@ -16,6 +16,12 @@ Het bouwen en schilderen van plastic schaalmodellen en mecha figuren is een hobb
 
 ---
 
+### Verf
+
+* [Verf collectie](./paints)
+
+---
+
 ### Gereedschappen
 
 * [Airbrush cabine](./equipment/airbrush-cabine)

src/Pages/Plamo/paints/PaintsPage.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import Breadcrumbs from '../../../UI/Breadcrumbs';
+import paintData from './paints.json';
+import { useTheme } from '../../../ThemeContext';
+import { getLanguage } from '../../../Language/Language';
+import MarkdownPage from '../../markdownPage';
+import { getString } from '../../../Language/LanguageStrings';
+
+const PaintsPage = () => {
+    const language = getLanguage();
+    const { theme } = useTheme();
+
+    return (
+        <article className='main-page'>
+            <Breadcrumbs separator=' > ' path="plamo">
+                {['Plamo']}
+            </Breadcrumbs>
+            <MarkdownPage md={'Plamo/' + language + '/paints/paints.md'} />
+
+            <section>
+                <table id="collectionTable" className={'table table-' + theme}>
+                    <thead>
+                        <tr>
+                            <th>{getString('colour')}</th>
+                            <th>{getString('identifier')}</th>
+                            <th>{getString('colour')}</th>
+                            <th>{getString('type')}</th>
+                            <th>{getString('manufacturer')}</th>
+                            <th>{getString('name')}</th>
+                            <th>{getString('stock')}</th>
+                            <th>{getString('total')}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {paintData.paints                    
+                            .map((item, index) => (                    
+                                <tr key={index}>
+                                    <td style={{ backgroundColor: item.hex }}></td>
+                                    <td>{item.identifier}</td>
+                                    <td>{item.colour}</td>
+                                    <td>{item.type}</td>
+                                    <td>{item.manufacturer}</td>
+                                    <td>{item.name}</td>
+                                    <td>{item['current-stock']}</td>
+                                    <td>{item.total}</td>
+                                </tr>
+                            ))
+                        }
+                    </tbody>
+                </table>
+            </section>
+        </article>
+    )
+}
+
+export default PaintsPage;

src/Pages/Plamo/paints/en/paints.md

@@ -0,0 +1,3 @@
+# Paints
+
+This is my collection of paints.

src/Pages/Plamo/paints/nl/paints.md

@@ -0,0 +1,3 @@
+# Verf
+
+Dit is mijn collectie verf.

src/Pages/Plamo/paints/paints.json

@@ -56,7 +56,7 @@
       "name": "Mr. Color Gold",
       "label": "Primary",
       "shine": "Metallic",
-      "identifier": "C9",
+      "identifier": "C009",
       "manufacturer": "Mr. Hobby",
       "colour": "goud",
       "type": "lak",
@@ -69,7 +69,7 @@
       "name": "Mr. Color Metal Black",
       "label": "Primary",
       "shine": "Metallic",
-      "identifier": "C78",
+      "identifier": "C078",
       "manufacturer": "Mr. Hobby",
       "colour": "zwart",
       "type": "lak",
@@ -95,7 +95,7 @@
       "name": "Mr. Color Silver",
       "label": "Primary",
       "shine": "Metallic",
-      "identifier": "C8",
+      "identifier": "C008",
       "manufacturer": "Mr. Hobby",
       "colour": "zilver",
       "type": "lak",
@@ -134,7 +134,7 @@
       "name": "Mr. Color Steel",
       "label": "Primary",
       "shine": "Metallic",
-      "identifier": "C28",
+      "identifier": "C028",
       "manufacturer": "Mr. Hobby",
       "colour": "zwart",
       "type": "lak",
@@ -147,7 +147,7 @@
       "name": "Mr. Color Flat Black",
       "label": "Primary",
       "shine": "Flat",
-      "identifier": "C33",
+      "identifier": "C033",
       "manufacturer": "Mr. Hobby",
       "colour": "zwart",
       "type": "lak",
@@ -225,7 +225,7 @@
       "name": "Mr. Color IJN Gray (Mitsubishi)",
       "label": "Primary",
       "shine": "Flat",
-      "identifier": "C35",
+      "identifier": "C035",
       "manufacturer": "Mr. Hobby",
       "colour": "grijs",
       "type": "lak",
@@ -238,7 +238,7 @@
       "name": "Mr. Color Clear",
       "label": "Primary",
       "shine": "Gloss",
-      "identifier": "C46",
+      "identifier": "C046",
       "manufacturer": "Mr. Hobby",
       "colour": "",
       "type": "vernis",
@@ -290,7 +290,7 @@
       "name": "Mr. Color RLM02 Gray",
       "label": "German aircraft WW2",
       "shine": "Semi-gloss",
-      "identifier": "C60",
+      "identifier": "C060",
       "manufacturer": "Mr. Hobby",
       "colour": "grijs",
       "type": "lak",
@@ -316,7 +316,7 @@
       "name": "Mr. Color Purple",
       "label": "Primary",
       "shine": "Gloss",
-      "identifier": "C67",
+      "identifier": "C067",
       "manufacturer": "Mr. Hobby",
       "colour": "paars",
       "type": "lak",
@@ -329,7 +329,7 @@
       "name": "Mr. Color Hull Red",
       "label": "Battle ship",
       "shine": "Semi-gloss",
-      "identifier": "C29",
+      "identifier": "C029",
       "manufacturer": "Mr. Hobby",
       "colour": "rood",
       "type": "lak",
@@ -368,7 +368,7 @@
       "name": "LP-7 Pure red",
       "label": "",
       "shine": "Gloss",
-      "identifier": "LP7",
+      "identifier": "LP07",
       "manufacturer": "Tamiya",
       "colour": "rood",
       "type": "lak",
@@ -394,7 +394,7 @@
       "name": "LP-2 White",
       "label": "",
       "shine": "Gloss",
-      "identifier": "LP2",
+      "identifier": "LP02",
       "manufacturer": "Tamiya",
       "colour": "wit",
       "type": "lak",
@@ -446,7 +446,7 @@
       "name": "LP-1 Black",
       "label": "",
       "shine": "Gloss",
-      "identifier": "LP1",
+      "identifier": "LP01",
       "manufacturer": "Tamiya",
       "colour": "zwart",
       "type": "lak",
@@ -537,7 +537,7 @@
       "name": "LP-8 Pure yellow",
       "label": "",
       "shine": "Gloss",
-      "identifier": "LP8",
+      "identifier": "LP08",
       "manufacturer": "Tamiya",
       "colour": "geel",
       "type": "lak",

src/Routers.js

@@ -3,6 +3,7 @@ import { Route } from 'react-router-dom';
 import { languages } from './Language/Language';
 import JapanesePage from './Pages/Japan/JapanesePage';
 import BlogPage from './Pages/Plamo/BlogPage';
+import PaintsPage from './Pages/Plamo/paints/PaintsPage';
 import CSharpPage from './Pages/Software/dotnet/csharp/CSharpPage';
 import ElmPage from './Pages/Software/elm/ElmPage';
 import HaskellPage from './Pages/Software/haskell/HaskellPage';
@@ -34,6 +35,11 @@ export const plamoEquipmentRoutes = languages.map(lang => {
     return <Route key={`${lang}-${page}`} exact path={path} element={<BlogPage mdPath={mdPath} />} />;
   });
 }).flat();
+export const plamoPaintRoutes = languages.map(lang => {
+    const path = `/${lang}/plamo/paints`;
+    const mdPath = `Plamo/paints/${lang}/paints.md`;
+    return <Route key={`${lang}-paints`} exact path={path} element={<PaintsPage mdPath={mdPath} />} />;
+}).flat();
 export const plamoShowcaseGundamRoutes = languages.map(lang => {
   const pages = ['kawasaki-zaku-ii', 'smc-2025-gundam'];
   return pages.map(page => {