feat: implemented write page

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) => (
+  <div className='inputLabelWrapperMain'>
+    <label className='form-label labelMain'>{label}</label>
+    {description && <p className='labelDescriptionMain'>{description}</p>}
+    {type === 'textarea' ? (
+      <textarea
+        className='inputMain'
+        placeholder={placeholder}
+        name={name}
+      ></textarea>
+    ) : (
+      <input
+        type={type}
+        className='inputMain'
+        placeholder={placeholder}
+        name={name}
+        inputMode={inputMode}
+      />
+    )}
+  </div>
+)
+
+interface CheckboxFieldProps {
+  label: string
+  name: string
+}
+
+export const CheckboxField = ({ label, name }: CheckboxFieldProps) => (
+  <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+    <label className='form-label labelMain'>{label}</label>
+    <input type='checkbox' className='CheckboxMain' name={name} />
+  </div>
+)
+
+interface ImageUploadFieldProps {
+  label: string
+  description: string
+}
+
+export const ImageUploadField = ({
+  label,
+  description
+}: ImageUploadFieldProps) => (
+  <div className='inputLabelWrapperMain'>
+    <label className='form-label labelMain'>{label}</label>
+    {description && <p className='labelDescriptionMain'>{description}</p>}
+    <div className='inputWrapperMain'>
+      <input
+        type='text'
+        className='inputMain'
+        inputMode='url'
+        placeholder='We recommend to upload images to https://nostr.build/'
+      />
+      <button className='btn btnMain btnMainRemove' type='button'>
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          viewBox='-32 0 512 512'
+          width='1em'
+          height='1em'
+          fill='currentColor'
+        >
+          <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+)

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) => (
-  <div className='inputLabelWrapperMain'>
-    <label className='form-label labelMain'>{label}</label>
-    {description && <p className='labelDescriptionMain'>{description}</p>}
-    {type === 'textarea' ? (
-      <textarea
-        className='inputMain'
-        placeholder={placeholder}
-        name={name}
-      ></textarea>
-    ) : (
-      <input
-        type={type}
-        className='inputMain'
-        placeholder={placeholder}
-        name={name}
-        inputMode={inputMode}
-      />
-    )}
-  </div>
-)
-
-interface CheckboxFieldProps {
-  label: string
-  name: string
-}
-
-const CheckboxField = ({ label, name }: CheckboxFieldProps) => (
-  <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
-    <label className='form-label labelMain'>{label}</label>
-    <input type='checkbox' className='CheckboxMain' name={name} />
-  </div>
-)
-
-interface ImageUploadFieldProps {
-  label: string
-  description: string
-}
-
-const ImageUploadField = ({ label, description }: ImageUploadFieldProps) => (
-  <div className='inputLabelWrapperMain'>
-    <label className='form-label labelMain'>{label}</label>
-    {description && <p className='labelDescriptionMain'>{description}</p>}
-    <div className='inputWrapperMain'>
-      <input
-        type='text'
-        className='inputMain'
-        inputMode='url'
-        placeholder='We recommend to upload images to https://nostr.build/'
-      />
-      <button className='btn btnMain btnMainRemove' type='button'>
-        <svg
-          xmlns='http://www.w3.org/2000/svg'
-          viewBox='-32 0 512 512'
-          width='1em'
-          height='1em'
-          fill='currentColor'
-        >
-          <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
-        </svg>
-      </button>
-    </div>
-  </div>
-)
-
 const DownloadUrlFields = () => {
   return (
     <div className='inputWrapperMainWrapper'>

src/layout/header.tsx

@@ -55,7 +55,10 @@ export const Header = () => {
                   </svg>
                   Submit Mod
                 </Link>
-                <a className={navStyles.NMTI_SecInside_Link} href='write.html'>
+                <Link
+                  to={appRoutes.write}
+                  className={navStyles.NMTI_SecInside_Link}
+                >
                   <svg
                     xmlns='http://www.w3.org/2000/svg'
                     viewBox='0 0 512 512'
@@ -66,7 +69,8 @@ export const Header = () => {
                     <path d='M467.1 241.1L351.1 288h94.34c-7.711 14.85-16.29 29.28-25.87 43.01l-132.5 52.99h85.65c-59.34 52.71-144.1 80.34-264.5 52.82l-68.13 68.13c-9.38 9.38-24.56 9.374-33.94 0c-9.375-9.375-9.375-24.56 0-33.94l253.4-253.4c4.846-6.275 4.643-15.19-1.113-20.95c-6.25-6.25-16.38-6.25-22.62 0l-168.6 168.6C24.56 58 366.9 8.118 478.9 .0846c18.87-1.354 34.41 14.19 33.05 33.05C508.7 78.53 498.5 161.8 467.1 241.1z'></path>
                   </svg>
                   Write
-                </a>
+                </Link>
+
                 <a
                   className={navStyles.NMTI_SecInside_Link}
                   href='settings-profile.html'

src/pages/write.tsx

@@ -0,0 +1,49 @@
+import { CheckboxField, InputField } from '../components/Inputs'
+import { ProfileSection } from '../components/ProfileSection'
+import '../styles/innerPage.css'
+import '../styles/styles.css'
+import '../styles/write.css'
+
+export const WritePage = () => {
+  return (
+    <div className='InnerBodyMain'>
+      <div className='ContainerMain'>
+        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
+          <div className='IBMSMSplitMain'>
+            <div className='IBMSMSplitMainBigSide'>
+              <div className='IBMSMTitleMain'>
+                <h2 className='IBMSMTitleMainHeading'>Write a blog post</h2>
+              </div>
+              <div className='IBMSMSMBS_Write'>
+                <InputField label='Title' placeholder='' name='title' />
+                <InputField label='Body' placeholder='' name='body' />
+                <InputField
+                  label='Featured Image URL'
+                  placeholder=''
+                  name='imageUrl'
+                  inputMode='url'
+                />
+                <InputField
+                  label='Summary'
+                  placeholder=''
+                  name='summary'
+                  type='textarea'
+                />
+                <CheckboxField
+                  label='This mod not safe for work (NSFW)'
+                  name='nsfw'
+                />
+                <div className='IBMSMSMBS_WriteAction'>
+                  <button className='btn btnMain' type='button'>
+                    Publish
+                  </button>
+                </div>
+              </div>
+            </div>
+            <ProfileSection />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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: <SubmitModPage />
+  },
+  {
+    path: appRoutes.write,
+    element: <WritePage />
   }
 ]