implement page controller

src/templates/glalie/Glalie.js

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+import AppContext from '../../context/AppContext';
+import { hexToRgb } from '../../utils';
+
+const Glalie = () => {
+  const context = useContext(AppContext);
+  const { state } = context;
+  const { data, theme } = state;
+
+  const { r, g, b } = hexToRgb(theme.colors.accent) || {};
+
+  return (
+    <div
+      style={{
+        fontFamily: theme.font.family,
+        backgroundColor: theme.colors.background,
+        color: theme.colors.primary,
+      }}
+    >
+      <div className="grid grid-cols-12">
+        <div className="col-span-4 bg-gray-200 py-10 px-5">Hello</div>
+        <div className="col-span-8 py-10 px-5">World</div>
+      </div>
+    </div>
+  );
+};
+
+export default Glalie;

src/templates/glalie/index.js

@@ -0,0 +1,5 @@
+import Glalie from './Glalie';
+import image from './preview.png';
+
+export const Image = image;
+export default Glalie;

src/templates/index.js

@@ -2,6 +2,7 @@ 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';
+import Glalie, { Image as GlaliePreview } from './glalie';
 
 export default [
   {
@@ -28,4 +29,10 @@ export default [
     component: Castform,
     preview: CastformPreview,
   },
+  {
+    key: 'glalie',
+    name: 'Glalie',
+    component: Glalie,
+    preview: GlaliePreview,
+  },
 ];