187 lines
8.0 KiB
TypeScript
187 lines
8.0 KiB
TypeScript
|
import '../styles/filters.css'
|
||
|
import '../styles/pagination.css'
|
||
|
import '../styles/styles.css'
|
||
|
import '../styles/search.css'
|
||
|
import { ModCard } from '../components/ModCard'
|
||
|
|
||
|
export const ModsPage = () => {
|
||
|
return (
|
||
|
<div className='InnerBodyMain'>
|
||
|
<div className='ContainerMain'>
|
||
|
<div className='IBMSecMainGroup IBMSecMainGroupAlt'>
|
||
|
<div className='IBMSecMain'>
|
||
|
<div className='SearchMainWrapper'>
|
||
|
<div className='IBMSMTitleMain'>
|
||
|
<h2 className='IBMSMTitleMainHeading'>Mods</h2>
|
||
|
</div>
|
||
|
<div className='SearchMain'>
|
||
|
<div className='SearchMainInside'>
|
||
|
<div className='SearchMainInsideWrapper'>
|
||
|
<input type='text' className='SMIWInput' />
|
||
|
<button className='btn btnMain SMIWButton' type='button'>
|
||
|
<svg
|
||
|
xmlns='http://www.w3.org/2000/svg'
|
||
|
viewBox='0 0 512 512'
|
||
|
width='1em'
|
||
|
height='1em'
|
||
|
fill='currentColor'
|
||
|
>
|
||
|
<path d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'></path>
|
||
|
</svg>
|
||
|
</button>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div className='IBMSecMain'>
|
||
|
<div className='FiltersMain'>
|
||
|
<div className='FiltersMainElement'>
|
||
|
<div className='dropdown dropdownMain'>
|
||
|
<button
|
||
|
className='btn dropdown-toggle btnMain btnMainDropdown'
|
||
|
aria-expanded='false'
|
||
|
data-bs-toggle='dropdown'
|
||
|
type='button'
|
||
|
>
|
||
|
Latest
|
||
|
</button>
|
||
|
<div className='dropdown-menu dropdownMainMenu'>
|
||
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||
|
Latest
|
||
|
</a>
|
||
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||
|
Oldest
|
||
|
</a>
|
||
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||
|
Best Rated
|
||
|
</a>
|
||
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||
|
Worst Rated
|
||
|
</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div className='FiltersMainElement'>
|
||
|
<div className='dropdown dropdownMain'>
|
||
|
<button
|
||
|
className='btn dropdown-toggle btnMain btnMainDropdown'
|
||
|
aria-expanded='false'
|
||
|
data-bs-toggle='dropdown'
|
||
|
type='button'
|
||
|
>
|
||
|
Show all (filtered)
|
||
|
</button>
|
||
|
<div className='dropdown-menu dropdownMainMenu'>
|
||
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||
|
Show all (filtered)
|
||
|
</a>
|
||
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||
|
Show all (unfiltered)
|
||
|
</a>
|
||
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||
|
Show from my follow list
|
||
|
</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div className='FiltersMainElement'>
|
||
|
<div className='dropdown dropdownMain'>
|
||
|
<button
|
||
|
className='btn dropdown-toggle btnMain btnMainDropdown'
|
||
|
aria-expanded='false'
|
||
|
data-bs-toggle='dropdown'
|
||
|
type='button'
|
||
|
>
|
||
|
Hide NSFW
|
||
|
</button>
|
||
|
<div className='dropdown-menu dropdownMainMenu'>
|
||
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||
|
Hide NSFW
|
||
|
</a>
|
||
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||
|
Show NSFW
|
||
|
<br />
|
||
|
</a>
|
||
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||
|
Only show NSFW
|
||
|
</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div className='FiltersMainElement'>
|
||
|
<div className='dropdown dropdownMain'>
|
||
|
<button
|
||
|
className='btn dropdown-toggle btnMain btnMainDropdown'
|
||
|
aria-expanded='false'
|
||
|
data-bs-toggle='dropdown'
|
||
|
type='button'
|
||
|
>
|
||
|
Show From: DEG Mods
|
||
|
</button>
|
||
|
<div className='dropdown-menu dropdownMainMenu'>
|
||
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||
|
Show From: DEG Mods
|
||
|
</a>
|
||
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||
|
Show All
|
||
|
</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div className='IBMSecMain IBMSMListWrapper'>
|
||
|
<div className='IBMSMList'>
|
||
|
<ModCard backgroundLink='https://image.nostr.build/65a11a00bb99c11561735f861c51b498cf9dc07d02beff7303fe7f7ab52f3987.jpg' />
|
||
|
<ModCard backgroundLink='https://web.archive.org/web/20240215093752im_/https://staticdelivery.nexusmods.com/mods/6144/images/headers/13_1707966408.jpg' />
|
||
|
<ModCard backgroundLink='https://steamuserimages-a.akamaihd.net/ugc/2013708095892656347/39A93A2B1EB05E725214373849F8E37FCEB4C2EA/?imw=512&imh=256&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true' />
|
||
|
<ModCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||
|
<ModCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||
|
<ModCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||
|
<ModCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||
|
<ModCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div className='IBMSecMain'>
|
||
|
<div className='PaginationMain'>
|
||
|
<div className='PaginationMainInside'>
|
||
|
<a
|
||
|
className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
|
||
|
href='#'
|
||
|
>
|
||
|
<i className='fas fa-chevron-left'></i>
|
||
|
</a>
|
||
|
<div className='PaginationMainInsideBoxGroup'>
|
||
|
<a className='PaginationMainInsideBox PMIBActive' href='#'>
|
||
|
<p>1</p>{' '}
|
||
|
</a>
|
||
|
<a className='PaginationMainInsideBox' href='#'>
|
||
|
<p>2</p>{' '}
|
||
|
</a>
|
||
|
<a className='PaginationMainInsideBox' href='#'>
|
||
|
<p>3</p>
|
||
|
</a>
|
||
|
<p className='PaginationMainInsideBox PMIBDots'>...</p>
|
||
|
<a className='PaginationMainInsideBox' href='#'>
|
||
|
<p>8</p>
|
||
|
</a>
|
||
|
</div>
|
||
|
<a
|
||
|
className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
|
||
|
href='#'
|
||
|
>
|
||
|
<i className='fas fa-chevron-right'></i>
|
||
|
</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
)
|
||
|
}
|