feat: implemented write page
This commit is contained in:
daniyal
parent
5c665f6373
commit
e4cdef4996
85
src/components/Inputs.tsx
Normal file
85
src/components/Inputs.tsx
Normal 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>
|
||||
)
|
||||
@ -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'>
|
||||
|
||||
@ -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
49
src/pages/write.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
@ -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 />
|
||||
}
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user