diff --git a/src/components/Inputs.tsx b/src/components/Inputs.tsx
new file mode 100644
index 0000000..bb75f5b
--- /dev/null
+++ b/src/components/Inputs.tsx
@@ -0,0 +1,85 @@
+import '../styles/styles.css'
+
+interface InputFieldProps {
+ label: string
+ description?: string
+ type?: 'text' | 'textarea'
+ placeholder: string
+ name: string
+ inputMode?: 'url'
+}
+
+export const InputField = ({
+ label,
+ description,
+ type = 'text',
+ placeholder,
+ name,
+ inputMode
+}: InputFieldProps) => (
+
+
+ {description &&
{description}
}
+ {type === 'textarea' ? (
+
+ ) : (
+
+ )}
+
+)
+
+interface CheckboxFieldProps {
+ label: string
+ name: string
+}
+
+export const CheckboxField = ({ label, name }: CheckboxFieldProps) => (
+
+
+
+
+)
+
+interface ImageUploadFieldProps {
+ label: string
+ description: string
+}
+
+export const ImageUploadField = ({
+ label,
+ description
+}: ImageUploadFieldProps) => (
+
+
+ {description &&
{description}
}
+
+
+)
diff --git a/src/components/ModForm.tsx b/src/components/ModForm.tsx
index b9649ba..6bd4f84 100644
--- a/src/components/ModForm.tsx
+++ b/src/components/ModForm.tsx
@@ -1,4 +1,5 @@
import '../styles/styles.css'
+import { CheckboxField, ImageUploadField, InputField } from './Inputs'
export const ModForm = () => {
return (
@@ -74,87 +75,6 @@ export const ModForm = () => {
)
}
-interface InputFieldProps {
- label: string
- description?: string
- type?: 'text' | 'textarea'
- placeholder: string
- name: string
- inputMode?: 'url'
-}
-
-const InputField = ({
- label,
- description,
- type = 'text',
- placeholder,
- name,
- inputMode
-}: InputFieldProps) => (
-
-
- {description &&
{description}
}
- {type === 'textarea' ? (
-
- ) : (
-
- )}
-
-)
-
-interface CheckboxFieldProps {
- label: string
- name: string
-}
-
-const CheckboxField = ({ label, name }: CheckboxFieldProps) => (
-
-
-
-
-)
-
-interface ImageUploadFieldProps {
- label: string
- description: string
-}
-
-const ImageUploadField = ({ label, description }: ImageUploadFieldProps) => (
-
-
- {description &&
{description}
}
-
-
-)
-
const DownloadUrlFields = () => {
return (
diff --git a/src/layout/header.tsx b/src/layout/header.tsx
index 739d9b9..826bf2f 100644
--- a/src/layout/header.tsx
+++ b/src/layout/header.tsx
@@ -55,7 +55,10 @@ export const Header = () => {
Submit Mod
-
+
Write
-
+
+
{
+ return (
+
+
+
+
+
+
+
Write a blog post
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index c5e3d87..48c7128 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -4,6 +4,7 @@ import { GamesPage } from '../pages/games'
import { HomePage } from '../pages/home'
import { ModsPage } from '../pages/mods'
import { SubmitModPage } from '../pages/submitMod'
+import { WritePage } from '../pages/write'
export const appRoutes = {
index: '/',
@@ -12,7 +13,8 @@ export const appRoutes = {
mods: '/mods',
about: '/about',
blog: '/blog',
- submitMod: '/submit-mod'
+ submitMod: '/submit-mod',
+ write: '/write'
}
export const routes = [
@@ -43,5 +45,9 @@ export const routes = [
{
path: appRoutes.submitMod,
element:
+ },
+ {
+ path: appRoutes.write,
+ element:
}
]