WIP

src/pages/About.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
+
+export const About = (): JSX.Element => {
+  return (
+    <PrimaryTemplate title="meshtastic-web" tagline="About">
+      <p>Content</p>
+    </PrimaryTemplate>
+  );
+};

src/pages/Messages.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Message } from '../components/chat/Message';
+import { MessageBar } from '../components/chat/MessageBar';
+import { useAppSelector } from '../hooks/redux';
+
+export const Messages = (): JSX.Element => {
+  const messages = useAppSelector((state) => state.meshtastic.messages);
+
+  return (
+    <div className="flex flex-col w-full">
+      <div className="flex flex-col p-6 sm:py-8 sm:px-10 border-b dark:border-gray-600 bg-white dark:bg-secondaryDark flex-grow overflow-y-auto space-y-2">
+        {messages.map((message, index) => (
+          <Message
+            key={index}
+            isSender={message.isSender}
+            message={message.message.data}
+            ack={message.ack}
+            rxTime={new Date()}
+          />
+        ))}
+      </div>
+      <MessageBar />
+    </div>
+  );
+};

src/pages/Nodes.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
+
+export const Nodes = (): JSX.Element => {
+  return (
+    <PrimaryTemplate title="Administration" tagline="Node">
+      <p>Nodes</p>
+    </PrimaryTemplate>
+  );
+};

src/pages/Settings.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { Input } from '../components/form/Input';
+import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
+import { useAppSelector } from '../hooks/redux';
+
+export const Settings = (): JSX.Element => {
+  const { t } = useTranslation();
+  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
+
+  console.log(radioConfig);
+
+  return (
+    <PrimaryTemplate title="Settings" tagline="Device">
+      <div className="flex">
+        <div className="w-1/3 text-lg">WiFi</div>
+        <div className="space-y-2">
+          <Input
+            name={t('strings.wifi_ssid')}
+            value={radioConfig.wifiSsid}
+            type="text"
+            valid={true}
+          />
+          <Input
+            name={t('strings.wifi_psk')}
+            value={radioConfig.wifiPassword}
+            type="text"
+            valid={true}
+          />
+        </div>
+      </div>
+    </PrimaryTemplate>
+  );
+};