694 lines
20 KiB
TypeScript
694 lines
20 KiB
TypeScript
import _ from 'lodash'
|
|
import Papa from 'papaparse'
|
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
import 'react-quill/dist/quill.snow.css'
|
|
import { FixedSizeList as List } from 'react-window'
|
|
|
|
import { kinds, UnsignedEvent } from 'nostr-tools'
|
|
import { toast } from 'react-toastify'
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
import { useAppSelector } from '../hooks'
|
|
import '../styles/styles.css'
|
|
import { now } from '../utils'
|
|
import { CheckboxField, InputField } from './Inputs'
|
|
|
|
interface DownloadUrl {
|
|
url: string
|
|
hash: string
|
|
signatureKey: string
|
|
malwareScanLink: string
|
|
modVersion: string
|
|
customNote: string
|
|
}
|
|
|
|
interface FormState {
|
|
game: string
|
|
title: string
|
|
body: string
|
|
featuredImageUrl: string
|
|
summary: string
|
|
nsfw: boolean
|
|
screenshotsUrls: string[]
|
|
tags: string
|
|
downloadUrls: DownloadUrl[]
|
|
}
|
|
|
|
interface GameOption {
|
|
value: string
|
|
label: string
|
|
}
|
|
|
|
let processedCSV = false
|
|
|
|
export const ModForm = () => {
|
|
const userState = useAppSelector((state) => state.user)
|
|
|
|
const [gameOptions, setGameOptions] = useState<GameOption[]>([])
|
|
|
|
const [formState, setFormState] = useState<FormState>({
|
|
game: '',
|
|
title: '',
|
|
body: '',
|
|
featuredImageUrl: '',
|
|
summary: '',
|
|
nsfw: false,
|
|
screenshotsUrls: [''],
|
|
tags: '',
|
|
downloadUrls: [
|
|
{
|
|
url: '',
|
|
hash: '',
|
|
signatureKey: '',
|
|
malwareScanLink: '',
|
|
modVersion: '',
|
|
customNote: ''
|
|
}
|
|
]
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (processedCSV) return
|
|
processedCSV = true
|
|
|
|
// Fetch the CSV file from the public folder
|
|
fetch('/assets/games.csv')
|
|
.then((response) => response.text())
|
|
.then((csvText) => {
|
|
// Parse the CSV text using PapaParse
|
|
Papa.parse<{
|
|
'Game Name': string
|
|
'16 by 9 image': string
|
|
'Boxart image': string
|
|
}>(csvText, {
|
|
worker: true,
|
|
header: true,
|
|
complete: (results) => {
|
|
const options = results.data.map((row) => ({
|
|
label: row['Game Name'],
|
|
value: row['Game Name']
|
|
}))
|
|
setGameOptions(options)
|
|
}
|
|
})
|
|
})
|
|
.catch((error) => console.error('Error fetching CSV file:', error))
|
|
}, [])
|
|
|
|
const handleInputChange = useCallback((name: string, value: string) => {
|
|
setFormState((prevState) => ({
|
|
...prevState,
|
|
[name]: value
|
|
}))
|
|
}, [])
|
|
|
|
const handleCheckboxChange = useCallback(
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, checked } = e.target
|
|
setFormState((prevState) => ({
|
|
...prevState,
|
|
[name]: checked
|
|
}))
|
|
},
|
|
[]
|
|
)
|
|
|
|
const addScreenshotUrl = useCallback(() => {
|
|
setFormState((prevState) => ({
|
|
...prevState,
|
|
screenshotsUrls: [...prevState.screenshotsUrls, '']
|
|
}))
|
|
}, [])
|
|
|
|
const removeScreenshotUrl = useCallback((index: number) => {
|
|
setFormState((prevState) => ({
|
|
...prevState,
|
|
screenshotsUrls: prevState.screenshotsUrls.filter((_, i) => i !== index)
|
|
}))
|
|
}, [])
|
|
|
|
const handleScreenshotUrlChange = useCallback(
|
|
(index: number, value: string) => {
|
|
setFormState((prevState) => ({
|
|
...prevState,
|
|
screenshotsUrls: [
|
|
...prevState.screenshotsUrls.map((url, i) => {
|
|
if (index === i) return value
|
|
return url
|
|
})
|
|
]
|
|
}))
|
|
},
|
|
[]
|
|
)
|
|
|
|
const addDownloadUrl = useCallback(() => {
|
|
setFormState((prevState) => ({
|
|
...prevState,
|
|
downloadUrls: [
|
|
...prevState.downloadUrls,
|
|
{
|
|
url: '',
|
|
hash: '',
|
|
signatureKey: '',
|
|
malwareScanLink: '',
|
|
modVersion: '',
|
|
customNote: ''
|
|
}
|
|
]
|
|
}))
|
|
}, [])
|
|
|
|
const removeDownloadUrl = useCallback((index: number) => {
|
|
setFormState((prevState) => ({
|
|
...prevState,
|
|
downloadUrls: prevState.downloadUrls.filter((_, i) => i !== index)
|
|
}))
|
|
}, [])
|
|
|
|
const handleDownloadUrlChange = useCallback(
|
|
(index: number, field: keyof DownloadUrl, value: string) => {
|
|
setFormState((prevState) => ({
|
|
...prevState,
|
|
downloadUrls: [
|
|
...prevState.downloadUrls.map((url, i) => {
|
|
if (index === i) url[field] = value
|
|
return url
|
|
})
|
|
]
|
|
}))
|
|
},
|
|
[]
|
|
)
|
|
|
|
const handlePublish = async () => {
|
|
let hexPubkey: string
|
|
|
|
if (userState.isAuth && userState.user?.pubkey) {
|
|
hexPubkey = userState.user.pubkey as string
|
|
} else {
|
|
hexPubkey = (await window.nostr?.getPublicKey()) as string
|
|
}
|
|
|
|
if (!hexPubkey) {
|
|
toast.error('Could not get pubkey')
|
|
return
|
|
}
|
|
|
|
if (!validateState()) return
|
|
|
|
const uuid = uuidv4()
|
|
|
|
const unsignedEvent: UnsignedEvent = {
|
|
kind: kinds.ClassifiedListing,
|
|
created_at: now(),
|
|
pubkey: hexPubkey,
|
|
content: formState.body,
|
|
tags: [
|
|
['d', uuid],
|
|
// todo: t tag for degmod identifier (use url)
|
|
['game', formState.game],
|
|
['title', formState.title],
|
|
['featuredImageUrl', formState.featuredImageUrl],
|
|
['summary', formState.summary],
|
|
['nsfw', formState.nsfw.toString()],
|
|
['screenshotsUrls', ...formState.screenshotsUrls],
|
|
['tags', formState.tags],
|
|
[
|
|
'downloadUrls',
|
|
...formState.downloadUrls.map((downloadUrl) =>
|
|
JSON.stringify(downloadUrl)
|
|
)
|
|
]
|
|
]
|
|
}
|
|
|
|
const signedEvent = await window.nostr?.signEvent(unsignedEvent)
|
|
console.log('signedEvent :>> ', signedEvent)
|
|
|
|
// todo: publish event
|
|
}
|
|
|
|
const validateState = () => {
|
|
if (formState.game === '') {
|
|
toast.error('Game field can not be empty')
|
|
return false
|
|
}
|
|
|
|
if (formState.title === '') {
|
|
toast.error('Title field can not be empty')
|
|
return false
|
|
}
|
|
|
|
if (formState.body === '') {
|
|
toast.error('Body field can not be empty')
|
|
return false
|
|
}
|
|
|
|
if (formState.featuredImageUrl === '') {
|
|
toast.error('FeaturedImageUrl field can not be empty')
|
|
return false
|
|
}
|
|
|
|
if (formState.summary === '') {
|
|
toast.error('Summary field can not be empty')
|
|
return false
|
|
}
|
|
|
|
if (
|
|
formState.screenshotsUrls.length === 0 ||
|
|
formState.screenshotsUrls.every((url) => url === '')
|
|
) {
|
|
toast.error('Required at least one screenshot url')
|
|
return false
|
|
}
|
|
|
|
if (formState.tags === '') {
|
|
toast.error('tags field can not be empty')
|
|
return false
|
|
}
|
|
|
|
if (
|
|
formState.downloadUrls.length === 0 ||
|
|
formState.downloadUrls.every((download) => download.url === '')
|
|
) {
|
|
toast.error('Required at least one download url')
|
|
return false
|
|
}
|
|
|
|
return true
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<GameDropdown
|
|
options={gameOptions}
|
|
selected={formState.game}
|
|
onChange={handleInputChange}
|
|
/>
|
|
|
|
<InputField
|
|
label='Title'
|
|
placeholder='Return the banana mod'
|
|
name='title'
|
|
value={formState.title}
|
|
onChange={handleInputChange}
|
|
/>
|
|
|
|
<InputField
|
|
label='Body'
|
|
type='richtext'
|
|
placeholder="Here's what this mod is all about"
|
|
name='body'
|
|
value={formState.body}
|
|
onChange={handleInputChange}
|
|
/>
|
|
|
|
<InputField
|
|
label='Featured Image URL'
|
|
description='We recommend to upload images to https://nostr.build/'
|
|
type='text'
|
|
inputMode='url'
|
|
placeholder='Image URL'
|
|
name='featuredImageUrl'
|
|
value={formState.featuredImageUrl}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<InputField
|
|
label='Summary'
|
|
type='textarea'
|
|
placeholder='This is a quick description of my mod'
|
|
name='summary'
|
|
value={formState.summary}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<CheckboxField
|
|
label='This mod not safe for work (NSFW)'
|
|
name='nsfw'
|
|
isChecked={formState.nsfw}
|
|
handleChange={handleCheckboxChange}
|
|
/>
|
|
<div className='inputLabelWrapperMain'>
|
|
<div className='labelWrapperMain'>
|
|
<label className='form-label labelMain'>Screenshots URLs</label>
|
|
<button
|
|
className='btn btnMain btnMainAdd'
|
|
type='button'
|
|
onClick={addScreenshotUrl}
|
|
>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
viewBox='-32 0 512 512'
|
|
width='1em'
|
|
height='1em'
|
|
fill='currentColor'
|
|
>
|
|
<path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p className='labelDescriptionMain'>
|
|
We recommend to upload images to https://nostr.build/
|
|
</p>
|
|
{formState.screenshotsUrls.map((url, index) => (
|
|
<ScreenshotUrlFields
|
|
key={index}
|
|
index={index}
|
|
url={url}
|
|
onUrlChange={handleScreenshotUrlChange}
|
|
onRemove={removeScreenshotUrl}
|
|
/>
|
|
))}
|
|
</div>
|
|
<InputField
|
|
label='Tags'
|
|
description='Separate each tag with a comma. (Example: tag1, tag2, tag3)'
|
|
placeholder='Tags'
|
|
name='tags'
|
|
value={formState.tags}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<div className='inputLabelWrapperMain'>
|
|
<div className='labelWrapperMain'>
|
|
<label className='form-label labelMain'>Download URLs</label>
|
|
<button
|
|
className='btn btnMain btnMainAdd'
|
|
type='button'
|
|
onClick={addDownloadUrl}
|
|
>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
viewBox='-32 0 512 512'
|
|
width='1em'
|
|
height='1em'
|
|
fill='currentColor'
|
|
>
|
|
<path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p className='labelDescriptionMain'>
|
|
You can upload your game mod to Github, as an example, and keep
|
|
updating it there. Also, it's advisable that you hash your package as
|
|
well with your nostr public key.
|
|
</p>
|
|
|
|
{formState.downloadUrls.map((download, index) => (
|
|
<DownloadUrlFields
|
|
key={index}
|
|
index={index}
|
|
download={download}
|
|
onUrlChange={handleDownloadUrlChange}
|
|
onRemove={removeDownloadUrl}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className='IBMSMSMBS_WriteAction'>
|
|
<button className='btn btnMain' type='button' onClick={handlePublish}>
|
|
Publish
|
|
</button>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
type DownloadUrlFieldsProps = {
|
|
index: number
|
|
download: DownloadUrl
|
|
onUrlChange: (index: number, field: keyof DownloadUrl, value: string) => void
|
|
onRemove: (index: number) => void
|
|
}
|
|
|
|
const DownloadUrlFields = React.memo(
|
|
({ index, download, onUrlChange, onRemove }: DownloadUrlFieldsProps) => {
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value } = e.target
|
|
onUrlChange(index, name as keyof DownloadUrl, value)
|
|
}
|
|
|
|
return (
|
|
<div className='inputWrapperMainWrapper'>
|
|
<div className='inputWrapperMain'>
|
|
<input
|
|
type='text'
|
|
className='inputMain'
|
|
name='url'
|
|
placeholder='Download URL'
|
|
value={download.url}
|
|
onChange={handleChange}
|
|
/>
|
|
|
|
<button
|
|
className='btn btnMain btnMainRemove'
|
|
type='button'
|
|
onClick={() => onRemove(index)}
|
|
>
|
|
<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 className='inputWrapperMain'>
|
|
<div className='inputWrapperMainBox'>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
viewBox='-96 0 512 512'
|
|
width='1em'
|
|
height='1em'
|
|
fill='currentColor'
|
|
>
|
|
<path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type='text'
|
|
className='inputMain'
|
|
name='hash'
|
|
placeholder='SHA-256 Hash'
|
|
value={download.hash}
|
|
onChange={handleChange}
|
|
/>
|
|
<div className='inputWrapperMainBox'></div>
|
|
</div>
|
|
<div className='inputWrapperMain'>
|
|
<div className='inputWrapperMainBox'>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
viewBox='-96 0 512 512'
|
|
width='1em'
|
|
height='1em'
|
|
fill='currentColor'
|
|
>
|
|
<path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type='text'
|
|
className='inputMain'
|
|
placeholder='Signature public key'
|
|
name='signatureKey'
|
|
value={download.signatureKey}
|
|
onChange={handleChange}
|
|
/>
|
|
<div className='inputWrapperMainBox'></div>
|
|
</div>
|
|
<div className='inputWrapperMain'>
|
|
<div className='inputWrapperMainBox'>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
viewBox='-96 0 512 512'
|
|
width='1em'
|
|
height='1em'
|
|
fill='currentColor'
|
|
>
|
|
<path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type='text'
|
|
className='inputMain'
|
|
name='malwareScanLink'
|
|
placeholder='Malware Scan Link'
|
|
value={download.malwareScanLink}
|
|
onChange={handleChange}
|
|
/>
|
|
<div className='inputWrapperMainBox'></div>
|
|
</div>
|
|
<div className='inputWrapperMain'>
|
|
<div className='inputWrapperMainBox'>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
viewBox='-96 0 512 512'
|
|
width='1em'
|
|
height='1em'
|
|
fill='currentColor'
|
|
>
|
|
<path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type='text'
|
|
className='inputMain'
|
|
placeholder='Mod version (1.0)'
|
|
name='modVersion'
|
|
value={download.modVersion}
|
|
onChange={handleChange}
|
|
/>
|
|
<div className='inputWrapperMainBox'></div>
|
|
</div>
|
|
<div className='inputWrapperMain'>
|
|
<div className='inputWrapperMainBox'>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
viewBox='-96 0 512 512'
|
|
width='1em'
|
|
height='1em'
|
|
fill='currentColor'
|
|
>
|
|
<path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type='text'
|
|
className='inputMain'
|
|
placeholder='Custom note/message'
|
|
name='customNote'
|
|
value={download.customNote}
|
|
onChange={handleChange}
|
|
/>
|
|
<div className='inputWrapperMainBox'></div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
type ScreenshotUrlFieldsProps = {
|
|
index: number
|
|
url: string
|
|
onUrlChange: (index: number, value: string) => void
|
|
onRemove: (index: number) => void
|
|
}
|
|
|
|
const ScreenshotUrlFields = React.memo(
|
|
({ index, url, onUrlChange, onRemove }: ScreenshotUrlFieldsProps) => {
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
onUrlChange(index, e.target.value)
|
|
}
|
|
|
|
return (
|
|
<div className='inputWrapperMain'>
|
|
<input
|
|
type='text'
|
|
className='inputMain'
|
|
inputMode='url'
|
|
placeholder='We recommend to upload images to https://nostr.build/'
|
|
value={url}
|
|
onChange={handleChange}
|
|
/>
|
|
<button
|
|
className='btn btnMain btnMainRemove'
|
|
type='button'
|
|
onClick={() => onRemove(index)}
|
|
>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
viewBox='-32 0 512 512'
|
|
width='1em'
|
|
height='1em'
|
|
fill='currentColor'
|
|
>
|
|
<path d='M323.3 32.01H188.7C172.3 32.01 160 44.31 160 60.73V96.01H32C14.33 96.01 0 110.3 0 128S14.33 160 32 160H480c17.67 0 32-14.33 32-32.01S497.7 96.01 480 96.01H352v-35.28C352 44.31 339.7 32.01 323.3 32.01zM64.9 477.5C66.5 492.3 79.31 504 94.72 504H417.3c15.41 0 28.22-11.72 29.81-26.5L480 192.2H32L64.9 477.5z'></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
type GameDropdownProps = {
|
|
options: GameOption[]
|
|
selected: string
|
|
onChange: (name: string, value: string) => void
|
|
}
|
|
|
|
const GameDropdown = ({ options, selected, onChange }: GameDropdownProps) => {
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('')
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
const isOptionClicked = useRef(false)
|
|
|
|
const handleSearchChange = useCallback((value: string) => {
|
|
setSearchTerm(value)
|
|
_.debounce(() => {
|
|
setDebouncedSearchTerm(value)
|
|
}, 300)()
|
|
}, [])
|
|
|
|
const filteredOptions = useMemo(() => {
|
|
if (debouncedSearchTerm === '') return []
|
|
else {
|
|
return options.filter((option) =>
|
|
option.label.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
|
|
)
|
|
}
|
|
}, [debouncedSearchTerm, options])
|
|
|
|
return (
|
|
<div className='inputLabelWrapperMain'>
|
|
<label className='form-label labelMain'>Game</label>
|
|
<p className='labelDescriptionMain'>
|
|
Can't find the game you're looking for? Send us a DM mentioning it so we
|
|
can add it.
|
|
</p>
|
|
<div className='dropdown dropdownMain'>
|
|
<input
|
|
ref={inputRef}
|
|
type='text'
|
|
className='inputMain dropdown-toggle'
|
|
placeholder='This mod is for a game called...'
|
|
aria-expanded='false'
|
|
data-bs-toggle='dropdown'
|
|
value={searchTerm || selected}
|
|
onChange={(e) => handleSearchChange(e.target.value)}
|
|
onBlur={() => {
|
|
if (!isOptionClicked.current) {
|
|
setSearchTerm('')
|
|
}
|
|
isOptionClicked.current = false
|
|
}}
|
|
/>
|
|
<div className='dropdown-menu dropdownMainMenu'>
|
|
<List
|
|
height={500}
|
|
width={'100%'}
|
|
itemCount={filteredOptions.length}
|
|
itemSize={35}
|
|
>
|
|
{({ index, style }) => (
|
|
<div
|
|
style={style}
|
|
className='dropdown-item dropdownMainMenuItem'
|
|
onMouseDown={() => (isOptionClicked.current = true)}
|
|
onClick={() => {
|
|
onChange('game', filteredOptions[index].value)
|
|
setSearchTerm('')
|
|
if (inputRef.current) {
|
|
inputRef.current.blur()
|
|
}
|
|
}}
|
|
>
|
|
{filteredOptions[index].label}
|
|
</div>
|
|
)}
|
|
</List>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|