feat: implemented write page

This commit is contained in:
daniyal 2024-07-12 14:22:31 +05:00
parent 5c665f6373
commit e4cdef4996
5 changed files with 148 additions and 84 deletions

85
src/components/Inputs.tsx Normal file
View File

@ -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>
)

View File

@ -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'>

View File

@ -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'

49
src/pages/write.tsx Normal file
View File

@ -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>
)
}

View File

@ -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 />
}
]