feat: implemented mod details page #3
17
index.html
17
index.html
@ -4,13 +4,13 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:image" content="assets/img/DEGM%20Thumb.png" />
|
<meta name="twitter:image" content="/assets/img/DEGM%20Thumb.png" />
|
||||||
<meta name="twitter:title" content="DEG Mods - Liberating Game Mods" />
|
<meta name="twitter:title" content="DEG Mods - Liberating Game Mods" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Never get your game mods censored, get banned, lose your history, nor lose the connection between game mod creators and fans. Download your mods freely."
|
content="Never get your game mods censored, get banned, lose your history, nor lose the connection between game mod creators and fans. Download your mods freely."
|
||||||
/>
|
/>
|
||||||
<meta property="og:image" content="assets/img/DEGM%20Thumb.png" />
|
<meta property="og:image" content="/assets/img/DEGM%20Thumb.png" />
|
||||||
<meta
|
<meta
|
||||||
name="twitter:description"
|
name="twitter:description"
|
||||||
content="Never get your game mods censored, get banned, lose your history, nor lose the connection between game mod creators and fans. Download your mods freely."
|
content="Never get your game mods censored, get banned, lose your history, nor lose the connection between game mod creators and fans. Download your mods freely."
|
||||||
@ -25,25 +25,20 @@
|
|||||||
rel="icon"
|
rel="icon"
|
||||||
type="image/png"
|
type="image/png"
|
||||||
sizes="935x934"
|
sizes="935x934"
|
||||||
href="assets/img/Logo%20with%20circle.png"
|
href="/assets/img/Logo%20with%20circle.png"
|
||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
rel="icon"
|
rel="icon"
|
||||||
type="image/png"
|
type="image/png"
|
||||||
sizes="935x934"
|
sizes="935x934"
|
||||||
href="assets/img/Logo%20with%20circle.png"
|
href="/assets/img/Logo%20with%20circle.png"
|
||||||
/>
|
/>
|
||||||
|
<link rel="icon" type="image/png" sizes="935x934" href="/index.html" />
|
||||||
<link
|
<link
|
||||||
rel="icon"
|
rel="icon"
|
||||||
type="image/png"
|
type="image/png"
|
||||||
sizes="935x934"
|
sizes="935x934"
|
||||||
href="assets/img/Logo%20with%20circle.png"
|
href="/assets/img/Logo%20with%20circle.png"
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="935x934"
|
|
||||||
href="assets/img/Logo%20with%20circle.png"
|
|
||||||
/>
|
/>
|
||||||
<title>DEG Mods - Liberating Game Mods</title>
|
<title>DEG Mods - Liberating Game Mods</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@ -20,7 +20,7 @@ export const ProfileSection = () => {
|
|||||||
className='IBMSMSMSSS_Author_Top_PP'
|
className='IBMSMSMSSS_Author_Top_PP'
|
||||||
style={{
|
style={{
|
||||||
background:
|
background:
|
||||||
"url('assets/img/media-cache%20(4).png') center / cover no-repeat"
|
"url('/assets/img/media-cache%20(4).png') center / cover no-repeat"
|
||||||
}}
|
}}
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
@ -219,6 +219,6 @@ const posts: Post[] = [
|
|||||||
name: 'Freakoverse',
|
name: 'Freakoverse',
|
||||||
link: `feed-note.html`,
|
link: `feed-note.html`,
|
||||||
content: `This is good.`,
|
content: `This is good.`,
|
||||||
imageUrl: 'assets/img/media-cache%20(1).jpg'
|
imageUrl: '/assets/img/media-cache%20(1).jpg'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@ -131,7 +131,7 @@ export const Header = () => {
|
|||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
className={navStyles.NMTI_SecInside_LinkImg}
|
className={navStyles.NMTI_SecInside_LinkImg}
|
||||||
src='assets/img/DEG%20Mods%20Default%20PP.png'
|
src='/assets/img/DEG%20Mods%20Default%20PP.png'
|
||||||
/>
|
/>
|
||||||
Login
|
Login
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -216,7 +216,7 @@ export const AboutPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
<img
|
<img
|
||||||
className='LearnTextCharacterImgRight'
|
className='LearnTextCharacterImgRight'
|
||||||
src='assets/img/vivian%20james.png'
|
src='/assets/img/vivian%20james.png'
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -55,18 +55,8 @@ export const InnerModPage = () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const postBodyRef = useRef<HTMLDivElement>(null)
|
|
||||||
const viewFullPostBtnRef = useRef<HTMLDivElement>(null)
|
|
||||||
const oldDownloadListRef = useRef<HTMLDivElement>(null)
|
const oldDownloadListRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
const viewFullPost = () => {
|
|
||||||
if (postBodyRef.current && viewFullPostBtnRef.current) {
|
|
||||||
postBodyRef.current.style.maxHeight = 'unset'
|
|
||||||
postBodyRef.current.style.padding = 'unset'
|
|
||||||
viewFullPostBtnRef.current.style.display = 'none'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleViewOldLinks = () => {
|
const handleViewOldLinks = () => {
|
||||||
if (oldDownloadListRef.current) {
|
if (oldDownloadListRef.current) {
|
||||||
// Toggle styles
|
// Toggle styles
|
||||||
@ -93,17 +83,96 @@ export const InnerModPage = () => {
|
|||||||
<div className='IBMSMSplitMain'>
|
<div className='IBMSMSplitMain'>
|
||||||
<div className='IBMSMSplitMainBigSide'>
|
<div className='IBMSMSplitMainBigSide'>
|
||||||
<div className='IBMSMSplitMainBigSideSec'>
|
<div className='IBMSMSplitMainBigSideSec'>
|
||||||
|
<Game game={modData.game} />
|
||||||
|
<Body
|
||||||
|
featuredImageUrl={modData.featuredImageUrl}
|
||||||
|
title={modData.title}
|
||||||
|
body={modData.body}
|
||||||
|
screenshotsUrls={modData.screenshotsUrls}
|
||||||
|
tags={modData.tags}
|
||||||
|
/>
|
||||||
|
<Interactions />
|
||||||
|
<PublishDetails
|
||||||
|
published_at={modData.published_at}
|
||||||
|
edited_at={modData.edited_at}
|
||||||
|
site={modData.site}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSplitMainBigSideSec'>
|
||||||
|
<div className='IBMSMSMBSSDownloadsWrapper'>
|
||||||
|
<h4 className='IBMSMSMBSSDownloadsTitle'>Mod Download</h4>
|
||||||
|
{modData.downloadUrls.length > 0 && (
|
||||||
|
<div className='IBMSMSMBSSDownloadsPrime'>
|
||||||
|
<Download url={modData.downloadUrls[0].url} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{modData.downloadUrls.length > 1 && (
|
||||||
|
<>
|
||||||
|
<div className='IBMSMSMBSSDownloadsActions'>
|
||||||
|
<button
|
||||||
|
className='btn btnMain'
|
||||||
|
id='viewOldLinks'
|
||||||
|
type='button'
|
||||||
|
onClick={handleViewOldLinks}
|
||||||
|
>
|
||||||
|
View other links
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
ref={oldDownloadListRef}
|
||||||
|
id='oldDownloadList'
|
||||||
|
className='IBMSMSMBSSDownloads'
|
||||||
|
style={{ padding: 0, height: '0px', border: 'unset' }}
|
||||||
|
>
|
||||||
|
{modData.downloadUrls
|
||||||
|
.slice(1)
|
||||||
|
.map((download, index) => (
|
||||||
|
<Download
|
||||||
|
key={`downloadUrl-${index}`}
|
||||||
|
url={download.url}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSplitMainBigSideSec'>
|
||||||
|
<div className='IBMSMSMBSSPostsWrapper'>
|
||||||
|
<h4 className='IBMSMSMBSSPostsTitle'>Creator's Blog Posts</h4>
|
||||||
|
<div className='IBMSMList IBMSMListAlt'>
|
||||||
|
<BlogCard backgroundLink='https://nichegamer.com/wp-content/uploads/2023/01/onimai-01-07-2023.jpg' />
|
||||||
|
<BlogCard backgroundLink='https://nichegamer.com/wp-content/uploads/2023/01/onimai-01-07-2023.jpg' />
|
||||||
|
<BlogCard backgroundLink='https://nichegamer.com/wp-content/uploads/2023/01/onimai-01-07-2023.jpg' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSplitMainBigSideSec'>
|
||||||
|
<Comments />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ProfileSection />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
type GameProps = {
|
||||||
|
game: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const Game = ({ game }: GameProps) => {
|
||||||
|
return (
|
||||||
<div className='IBMSMSMBSSModFor'>
|
<div className='IBMSMSMBSSModFor'>
|
||||||
<p className='IBMSMSMBSSModForPara'>
|
<p className='IBMSMSMBSSModForPara'>
|
||||||
Mod for:
|
Mod for:
|
||||||
<a className='IBMSMSMBSSModForLink' href='search.html'>
|
<a className='IBMSMSMBSSModForLink' href='search.html'>
|
||||||
{modData.game}
|
{game}
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<div
|
<div className='dropdown dropdownMain' style={{ flexGrow: 'unset' }}>
|
||||||
className='dropdown dropdownMain'
|
|
||||||
style={{ flexGrow: 'unset' }}
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
className='btn btnMain btnMainDropdown'
|
className='btn btnMain btnMainDropdown'
|
||||||
aria-expanded='false'
|
aria-expanded='false'
|
||||||
@ -124,9 +193,7 @@ export const InnerModPage = () => {
|
|||||||
<path d='M64 360C94.93 360 120 385.1 120 416C120 446.9 94.93 472 64 472C33.07 472 8 446.9 8 416C8 385.1 33.07 360 64 360zM64 200C94.93 200 120 225.1 120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200zM64 152C33.07 152 8 126.9 8 96C8 65.07 33.07 40 64 40C94.93 40 120 65.07 120 96C120 126.9 94.93 152 64 152z'></path>
|
<path d='M64 360C94.93 360 120 385.1 120 416C120 446.9 94.93 472 64 472C33.07 472 8 446.9 8 416C8 385.1 33.07 360 64 360zM64 200C94.93 200 120 225.1 120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200zM64 152C33.07 152 8 126.9 8 96C8 65.07 33.07 40 64 40C94.93 40 120 65.07 120 96C120 126.9 94.93 152 64 152z'></path>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<div
|
<div className={`dropdown-menu dropdown-menu-end dropdownMainMenu`}>
|
||||||
className={`dropdown-menu dropdown-menu-end dropdownMainMenu`}
|
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
className='dropdown-item dropdownMainMenuItem'
|
className='dropdown-item dropdownMainMenuItem'
|
||||||
href='submit-mod.html'
|
href='submit-mod.html'
|
||||||
@ -143,10 +210,7 @@ export const InnerModPage = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
Edit
|
Edit
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||||||
className='dropdown-item dropdownMainMenuItem'
|
|
||||||
href='#'
|
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
viewBox='0 0 512 512'
|
viewBox='0 0 512 512'
|
||||||
@ -159,10 +223,7 @@ export const InnerModPage = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
Copy URL
|
Copy URL
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||||||
className='dropdown-item dropdownMainMenuItem'
|
|
||||||
href='#'
|
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
viewBox='0 0 512 512'
|
viewBox='0 0 512 512'
|
||||||
@ -192,10 +253,7 @@ export const InnerModPage = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
Report
|
Report
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a className='dropdown-item dropdownMainMenuItem' href='#'>
|
||||||
className='dropdown-item dropdownMainMenuItem'
|
|
||||||
href='#'
|
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
viewBox='-32 0 512 512'
|
viewBox='-32 0 512 512'
|
||||||
@ -211,18 +269,46 @@ export const InnerModPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
type BodyProps = {
|
||||||
|
featuredImageUrl: string
|
||||||
|
title: string
|
||||||
|
body: string
|
||||||
|
screenshotsUrls: string[]
|
||||||
|
tags: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const Body = ({
|
||||||
|
featuredImageUrl,
|
||||||
|
title,
|
||||||
|
body,
|
||||||
|
screenshotsUrls,
|
||||||
|
tags
|
||||||
|
}: BodyProps) => {
|
||||||
|
const postBodyRef = useRef<HTMLDivElement>(null)
|
||||||
|
const viewFullPostBtnRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
const viewFullPost = () => {
|
||||||
|
if (postBodyRef.current && viewFullPostBtnRef.current) {
|
||||||
|
postBodyRef.current.style.maxHeight = 'unset'
|
||||||
|
postBodyRef.current.style.padding = 'unset'
|
||||||
|
viewFullPostBtnRef.current.style.display = 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
<div className='IBMSMSMBSSPost'>
|
<div className='IBMSMSMBSSPost'>
|
||||||
<div
|
<div
|
||||||
className='IBMSMSMBSSPostPicture'
|
className='IBMSMSMBSSPostPicture'
|
||||||
style={{
|
style={{
|
||||||
background: `url(${modData.featuredImageUrl}) center / cover no-repeat`
|
background: `url(${featuredImageUrl}) center / cover no-repeat`
|
||||||
}}
|
}}
|
||||||
></div>
|
></div>
|
||||||
<div className='IBMSMSMBSSPostInside'>
|
<div className='IBMSMSMBSSPostInside'>
|
||||||
<div className='IBMSMSMBSSPostTitle'>
|
<div className='IBMSMSMBSSPostTitle'>
|
||||||
<h1 className='IBMSMSMBSSPostTitleHeading'>
|
<h1 className='IBMSMSMBSSPostTitleHeading'>{title}</h1>
|
||||||
{modData.title}
|
|
||||||
</h1>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
ref={postBodyRef}
|
ref={postBodyRef}
|
||||||
@ -232,18 +318,15 @@ export const InnerModPage = () => {
|
|||||||
<div
|
<div
|
||||||
className='IBMSMSMBSSPostTitleText'
|
className='IBMSMSMBSSPostTitleText'
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
__html: DOMPurify.sanitize(modData.body)
|
__html: DOMPurify.sanitize(body)
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div
|
<div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
|
||||||
ref={viewFullPostBtnRef}
|
|
||||||
className='IBMSMSMBSSPostBodyHide'
|
|
||||||
>
|
|
||||||
<p onClick={viewFullPost}>View</p>
|
<p onClick={viewFullPost}>View</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='IBMSMSMBSSShots'>
|
<div className='IBMSMSMBSSShots'>
|
||||||
{modData.screenshotsUrls.map((url, index) => (
|
{screenshotsUrls.map((url, index) => (
|
||||||
<img
|
<img
|
||||||
className='IBMSMSMBSSShotsImg'
|
className='IBMSMSMBSSShotsImg'
|
||||||
src={url}
|
src={url}
|
||||||
@ -253,18 +336,19 @@ export const InnerModPage = () => {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className='IBMSMSMBSSTags'>
|
<div className='IBMSMSMBSSTags'>
|
||||||
{modData.tags.map((tag, index) => (
|
{tags.map((tag, index) => (
|
||||||
<a
|
<a className='IBMSMSMBSSTagsTag' href='#' key={`tag-${index}`}>
|
||||||
className='IBMSMSMBSSTagsTag'
|
|
||||||
href='#'
|
|
||||||
key={`tag-${index}`}
|
|
||||||
>
|
|
||||||
{tag}
|
{tag}
|
||||||
</a>
|
</a>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const Interactions = () => {
|
||||||
|
return (
|
||||||
<div className='IBMSMSplitMainBigSideSec'>
|
<div className='IBMSMSplitMainBigSideSec'>
|
||||||
<div className='IBMSMSMBSS_Details'>
|
<div className='IBMSMSMBSS_Details'>
|
||||||
<a
|
<a
|
||||||
@ -352,6 +436,21 @@ export const InnerModPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
type PublishDetailsProps = {
|
||||||
|
published_at: number
|
||||||
|
edited_at: number
|
||||||
|
site: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const PublishDetails = ({
|
||||||
|
published_at,
|
||||||
|
edited_at,
|
||||||
|
site
|
||||||
|
}: PublishDetailsProps) => {
|
||||||
|
return (
|
||||||
<div className='IBMSMSplitMainBigSideSec'>
|
<div className='IBMSMSplitMainBigSideSec'>
|
||||||
<div className='IBMSMSMBSSPost_PostDetails'>
|
<div className='IBMSMSMBSSPost_PostDetails'>
|
||||||
<div
|
<div
|
||||||
@ -375,9 +474,7 @@ export const InnerModPage = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
<p className='IBMSMSMBSSPost_PDElementText'>
|
<p className='IBMSMSMBSSPost_PDElementText'>
|
||||||
{formatDate(
|
{formatDate(
|
||||||
(modData.published_at !== -1
|
(published_at !== -1 ? published_at : edited_at) * 1000,
|
||||||
? modData.published_at
|
|
||||||
: modData.edited_at) * 1000,
|
|
||||||
'dd/m/yyyy'
|
'dd/m/yyyy'
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
@ -399,7 +496,7 @@ export const InnerModPage = () => {
|
|||||||
<path d='M362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32zM421.7 220.3L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3z' />
|
<path d='M362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32zM421.7 220.3L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3z' />
|
||||||
</svg>
|
</svg>
|
||||||
<p className='IBMSMSMBSSPost_PDElementText'>
|
<p className='IBMSMSMBSSPost_PDElementText'>
|
||||||
{formatDate(modData.edited_at * 1000, 'dd/m/yyyy')}
|
{formatDate(edited_at * 1000, 'dd/m/yyyy')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<a
|
<a
|
||||||
@ -420,244 +517,10 @@ export const InnerModPage = () => {
|
|||||||
>
|
>
|
||||||
<path d='M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z' />
|
<path d='M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z' />
|
||||||
</svg>
|
</svg>
|
||||||
<p className='IBMSMSMBSSPost_PDElementText'>
|
<p className='IBMSMSMBSSPost_PDElementText'>{site}</p>
|
||||||
{modData.site}
|
|
||||||
</p>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div className='IBMSMSplitMainBigSideSec'>
|
|
||||||
<div className='IBMSMSMBSSDownloadsWrapper'>
|
|
||||||
<h4 className='IBMSMSMBSSDownloadsTitle'>Mod Download</h4>
|
|
||||||
{modData.downloadUrls.length > 0 && (
|
|
||||||
<div className='IBMSMSMBSSDownloadsPrime'>
|
|
||||||
<Download url={modData.downloadUrls[0].url} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{modData.downloadUrls.length > 1 && (
|
|
||||||
<>
|
|
||||||
<div className='IBMSMSMBSSDownloadsActions'>
|
|
||||||
<button
|
|
||||||
className='btn btnMain'
|
|
||||||
id='viewOldLinks'
|
|
||||||
type='button'
|
|
||||||
onClick={handleViewOldLinks}
|
|
||||||
>
|
|
||||||
View other links
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
ref={oldDownloadListRef}
|
|
||||||
id='oldDownloadList'
|
|
||||||
className='IBMSMSMBSSDownloads'
|
|
||||||
style={{ padding: 0, height: '0px', border: 'unset' }}
|
|
||||||
>
|
|
||||||
{modData.downloadUrls
|
|
||||||
.slice(1)
|
|
||||||
.map((download, index) => (
|
|
||||||
<Download
|
|
||||||
key={`downloadUrl-${index}`}
|
|
||||||
url={download.url}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSplitMainBigSideSec'>
|
|
||||||
<div className='IBMSMSMBSSPostsWrapper'>
|
|
||||||
<h4 className='IBMSMSMBSSPostsTitle'>Creator's Blog Posts</h4>
|
|
||||||
<div className='IBMSMList IBMSMListAlt'>
|
|
||||||
<BlogCard backgroundLink='https://nichegamer.com/wp-content/uploads/2023/01/onimai-01-07-2023.jpg' />
|
|
||||||
<BlogCard backgroundLink='https://nichegamer.com/wp-content/uploads/2023/01/onimai-01-07-2023.jpg' />
|
|
||||||
<BlogCard backgroundLink='https://nichegamer.com/wp-content/uploads/2023/01/onimai-01-07-2023.jpg' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSplitMainBigSideSec'>
|
|
||||||
<div className='IBMSMSMBSSCommentsWrapper'>
|
|
||||||
<h4 className='IBMSMSMBSSTitle'>Comments</h4>
|
|
||||||
<div id='ArticleComments-1' className='IBMSMSMBSSComments'>
|
|
||||||
<div className='IBMSMSMBSSCommentsCreation'>
|
|
||||||
<div className='IBMSMSMBSSCC_Top'>
|
|
||||||
<textarea
|
|
||||||
id='commentBox-1'
|
|
||||||
className='IBMSMSMBSSCC_Top_Box'
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMBSSCC_Bottom'>
|
|
||||||
<a className='IBMSMSMBSSCC_BottomButton'>
|
|
||||||
Comment
|
|
||||||
<div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElementLoad'></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='CommentsToggle'>
|
|
||||||
<button
|
|
||||||
className='btn btnMain CommentsToggleBtn CommentsToggleActive'
|
|
||||||
type='button'
|
|
||||||
>
|
|
||||||
All Comments
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className='btn btnMain CommentsToggleBtn'
|
|
||||||
type='button'
|
|
||||||
>
|
|
||||||
Creator Comments
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMBSSCommentsList'>
|
|
||||||
<div className='IBMSMSMBSSCL_Comment'>
|
|
||||||
<div className='IBMSMSMBSSCL_CommentTop'>
|
|
||||||
<div className='IBMSMSMBSSCL_CommentTopPPWrapper'>
|
|
||||||
<a
|
|
||||||
className='IBMSMSMBSSCL_CommentTopPP'
|
|
||||||
href='profile.html'
|
|
||||||
style={{
|
|
||||||
background: `url('assets/img/media-cache%20(4).png') center / cover no-repeat`
|
|
||||||
}}
|
|
||||||
></a>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMBSSCL_CommentTopDetailsWrapper'>
|
|
||||||
<div className='IBMSMSMBSSCL_CommentTopDetails'>
|
|
||||||
<a
|
|
||||||
className='IBMSMSMBSSCL_CTD_Name'
|
|
||||||
href='profile.html'
|
|
||||||
>
|
|
||||||
FreakoverseFreakoverseFreakoverse
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className='IBMSMSMBSSCL_CTD_Address'
|
|
||||||
href='profile.html'
|
|
||||||
>
|
|
||||||
npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMBSSCL_CommentActionsDetails'>
|
|
||||||
<a
|
|
||||||
className='IBMSMSMBSSCL_CADTime'
|
|
||||||
href='feed-note.html'
|
|
||||||
>
|
|
||||||
8:45 PM
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className='IBMSMSMBSSCL_CADDate'
|
|
||||||
href='feed-note.html'
|
|
||||||
>
|
|
||||||
02/05/2024
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMBSSCL_CommentBottom'>
|
|
||||||
<p className='IBMSMSMBSSCL_CBText'>
|
|
||||||
Yo this article was insane to read!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMBSSCL_CommentActions'>
|
|
||||||
<div className='IBMSMSMBSSCL_CommentActionsInside'>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEUp IBMSMSMBSSCL_CAEUpActive'>
|
|
||||||
<svg
|
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
|
||||||
viewBox='0 0 512 512'
|
|
||||||
width='1em'
|
|
||||||
height='1em'
|
|
||||||
fill='currentColor'
|
|
||||||
className='IBMSMSMBSSCL_CAElementIcon'
|
|
||||||
>
|
|
||||||
<path d='M0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84.02L256 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 .0003 232.4 .0003 190.9L0 190.9z'></path>
|
|
||||||
</svg>
|
|
||||||
<p className='IBMSMSMBSSCL_CAElementText'>52</p>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElementLoad'></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEDown'>
|
|
||||||
<svg
|
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
|
||||||
viewBox='0 0 512 512'
|
|
||||||
width='1em'
|
|
||||||
height='1em'
|
|
||||||
fill='currentColor'
|
|
||||||
className='IBMSMSMBSSCL_CAElementIcon'
|
|
||||||
>
|
|
||||||
<path d='M512 440.1C512 479.9 479.7 512 439.1 512H71.92C32.17 512 0 479.8 0 440c0-35.88 26.19-65.35 60.56-70.85C43.31 356 32 335.4 32 312C32 272.2 64.25 240 104 240h13.99C104.5 228.2 96 211.2 96 192c0-35.38 28.56-64 63.94-64h16C220.1 128 256 92.12 256 48c0-17.38-5.784-33.35-15.16-46.47C245.8 .7754 250.9 0 256 0c53 0 96 43 96 96c0 11.25-2.288 22-5.913 32h5.879C387.3 128 416 156.6 416 192c0 19.25-8.59 36.25-22.09 48H408C447.8 240 480 272.2 480 312c0 23.38-11.38 44.01-28.63 57.14C485.7 374.6 512 404.3 512 440.1z'></path>
|
|
||||||
</svg>
|
|
||||||
<p className='IBMSMSMBSSCL_CAElementText'>4</p>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElementLoad'></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAERepost IBMSMSMBSSCL_CAERepostActive'>
|
|
||||||
<svg
|
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
|
||||||
viewBox='0 -64 640 640'
|
|
||||||
width='1em'
|
|
||||||
height='1em'
|
|
||||||
fill='currentColor'
|
|
||||||
className='IBMSMSMBSSCL_CAElementIcon'
|
|
||||||
>
|
|
||||||
<path d='M614.2 334.8C610.5 325.8 601.7 319.1 592 319.1H544V176C544 131.9 508.1 96 464 96h-128c-17.67 0-32 14.31-32 32s14.33 32 32 32h128C472.8 160 480 167.2 480 176v143.1h-48c-9.703 0-18.45 5.844-22.17 14.82s-1.656 19.29 5.203 26.16l80 80.02C499.7 445.7 505.9 448 512 448s12.28-2.344 16.97-7.031l80-80.02C615.8 354.1 617.9 343.8 614.2 334.8zM304 352h-128C167.2 352 160 344.8 160 336V192h48c9.703 0 18.45-5.844 22.17-14.82s1.656-19.29-5.203-26.16l-80-80.02C140.3 66.34 134.1 64 128 64S115.7 66.34 111 71.03l-80 80.02C24.17 157.9 22.11 168.2 25.83 177.2S38.3 192 48 192H96V336C96 380.1 131.9 416 176 416h128c17.67 0 32-14.31 32-32S321.7 352 304 352z'></path>
|
|
||||||
</svg>
|
|
||||||
<p className='IBMSMSMBSSCL_CAElementText'>6</p>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElementLoad'></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEBolt IBMSMSMBSSCL_CAEBoltActive'>
|
|
||||||
<svg
|
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
|
||||||
viewBox='-64 0 512 512'
|
|
||||||
width='1em'
|
|
||||||
height='1em'
|
|
||||||
fill='currentColor'
|
|
||||||
className='IBMSMSMBSSCL_CAElementIcon'
|
|
||||||
>
|
|
||||||
<path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z'></path>
|
|
||||||
</svg>
|
|
||||||
<p className='IBMSMSMBSSCL_CAElementText'>500K</p>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElementLoad'></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEReplies'>
|
|
||||||
<svg
|
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
|
||||||
viewBox='0 0 512 512'
|
|
||||||
width='1em'
|
|
||||||
height='1em'
|
|
||||||
fill='currentColor'
|
|
||||||
className='IBMSMSMBSSCL_CAElementIcon'
|
|
||||||
>
|
|
||||||
<path d='M256 32C114.6 32 .0272 125.1 .0272 240c0 49.63 21.35 94.98 56.97 130.7c-12.5 50.37-54.27 95.27-54.77 95.77c-2.25 2.25-2.875 5.734-1.5 8.734C1.979 478.2 4.75 480 8 480c66.25 0 115.1-31.76 140.6-51.39C181.2 440.9 217.6 448 256 448c141.4 0 255.1-93.13 255.1-208S397.4 32 256 32z'></path>
|
|
||||||
</svg>
|
|
||||||
<p className='IBMSMSMBSSCL_CAElementText'>12</p>
|
|
||||||
<p className='IBMSMSMBSSCL_CAElementText'>
|
|
||||||
Replies
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEReply'>
|
|
||||||
<p className='IBMSMSMBSSCL_CAElementText'>
|
|
||||||
Reply
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ProfileSection />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -843,3 +706,163 @@ const Download = ({ url }: DownloadProps) => (
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const Comments = () => {
|
||||||
|
return (
|
||||||
|
<div className='IBMSMSMBSSCommentsWrapper'>
|
||||||
|
<h4 className='IBMSMSMBSSTitle'>Comments</h4>
|
||||||
|
<div id='ArticleComments-1' className='IBMSMSMBSSComments'>
|
||||||
|
<div className='IBMSMSMBSSCommentsCreation'>
|
||||||
|
<div className='IBMSMSMBSSCC_Top'>
|
||||||
|
<textarea
|
||||||
|
id='commentBox-1'
|
||||||
|
className='IBMSMSMBSSCC_Top_Box'
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBSSCC_Bottom'>
|
||||||
|
<a className='IBMSMSMBSSCC_BottomButton'>
|
||||||
|
Comment
|
||||||
|
<div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElementLoad'></div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='CommentsToggle'>
|
||||||
|
<button
|
||||||
|
className='btn btnMain CommentsToggleBtn CommentsToggleActive'
|
||||||
|
type='button'
|
||||||
|
>
|
||||||
|
All Comments
|
||||||
|
</button>
|
||||||
|
<button className='btn btnMain CommentsToggleBtn' type='button'>
|
||||||
|
Creator Comments
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBSSCommentsList'>
|
||||||
|
<div className='IBMSMSMBSSCL_Comment'>
|
||||||
|
<div className='IBMSMSMBSSCL_CommentTop'>
|
||||||
|
<div className='IBMSMSMBSSCL_CommentTopPPWrapper'>
|
||||||
|
<a
|
||||||
|
className='IBMSMSMBSSCL_CommentTopPP'
|
||||||
|
href='profile.html'
|
||||||
|
style={{
|
||||||
|
background: `url('/assets/img/media-cache%20(4).png') center / cover no-repeat`
|
||||||
|
}}
|
||||||
|
></a>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBSSCL_CommentTopDetailsWrapper'>
|
||||||
|
<div className='IBMSMSMBSSCL_CommentTopDetails'>
|
||||||
|
<a className='IBMSMSMBSSCL_CTD_Name' href='profile.html'>
|
||||||
|
FreakoverseFreakoverseFreakoverse
|
||||||
|
</a>
|
||||||
|
<a className='IBMSMSMBSSCL_CTD_Address' href='profile.html'>
|
||||||
|
npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBSSCL_CommentActionsDetails'>
|
||||||
|
<a className='IBMSMSMBSSCL_CADTime' href='feed-note.html'>
|
||||||
|
8:45 PM
|
||||||
|
</a>
|
||||||
|
<a className='IBMSMSMBSSCL_CADDate' href='feed-note.html'>
|
||||||
|
02/05/2024
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBSSCL_CommentBottom'>
|
||||||
|
<p className='IBMSMSMBSSCL_CBText'>
|
||||||
|
Yo this article was insane to read!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBSSCL_CommentActions'>
|
||||||
|
<div className='IBMSMSMBSSCL_CommentActionsInside'>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEUp IBMSMSMBSSCL_CAEUpActive'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='0 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
className='IBMSMSMBSSCL_CAElementIcon'
|
||||||
|
>
|
||||||
|
<path d='M0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84.02L256 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 .0003 232.4 .0003 190.9L0 190.9z'></path>
|
||||||
|
</svg>
|
||||||
|
<p className='IBMSMSMBSSCL_CAElementText'>52</p>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElementLoad'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEDown'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='0 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
className='IBMSMSMBSSCL_CAElementIcon'
|
||||||
|
>
|
||||||
|
<path d='M512 440.1C512 479.9 479.7 512 439.1 512H71.92C32.17 512 0 479.8 0 440c0-35.88 26.19-65.35 60.56-70.85C43.31 356 32 335.4 32 312C32 272.2 64.25 240 104 240h13.99C104.5 228.2 96 211.2 96 192c0-35.38 28.56-64 63.94-64h16C220.1 128 256 92.12 256 48c0-17.38-5.784-33.35-15.16-46.47C245.8 .7754 250.9 0 256 0c53 0 96 43 96 96c0 11.25-2.288 22-5.913 32h5.879C387.3 128 416 156.6 416 192c0 19.25-8.59 36.25-22.09 48H408C447.8 240 480 272.2 480 312c0 23.38-11.38 44.01-28.63 57.14C485.7 374.6 512 404.3 512 440.1z'></path>
|
||||||
|
</svg>
|
||||||
|
<p className='IBMSMSMBSSCL_CAElementText'>4</p>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElementLoad'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAERepost IBMSMSMBSSCL_CAERepostActive'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='0 -64 640 640'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
className='IBMSMSMBSSCL_CAElementIcon'
|
||||||
|
>
|
||||||
|
<path d='M614.2 334.8C610.5 325.8 601.7 319.1 592 319.1H544V176C544 131.9 508.1 96 464 96h-128c-17.67 0-32 14.31-32 32s14.33 32 32 32h128C472.8 160 480 167.2 480 176v143.1h-48c-9.703 0-18.45 5.844-22.17 14.82s-1.656 19.29 5.203 26.16l80 80.02C499.7 445.7 505.9 448 512 448s12.28-2.344 16.97-7.031l80-80.02C615.8 354.1 617.9 343.8 614.2 334.8zM304 352h-128C167.2 352 160 344.8 160 336V192h48c9.703 0 18.45-5.844 22.17-14.82s1.656-19.29-5.203-26.16l-80-80.02C140.3 66.34 134.1 64 128 64S115.7 66.34 111 71.03l-80 80.02C24.17 157.9 22.11 168.2 25.83 177.2S38.3 192 48 192H96V336C96 380.1 131.9 416 176 416h128c17.67 0 32-14.31 32-32S321.7 352 304 352z'></path>
|
||||||
|
</svg>
|
||||||
|
<p className='IBMSMSMBSSCL_CAElementText'>6</p>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElementLoad'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEBolt IBMSMSMBSSCL_CAEBoltActive'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='-64 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
className='IBMSMSMBSSCL_CAElementIcon'
|
||||||
|
>
|
||||||
|
<path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z'></path>
|
||||||
|
</svg>
|
||||||
|
<p className='IBMSMSMBSSCL_CAElementText'>500K</p>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElementLoad'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEReplies'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='0 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
className='IBMSMSMBSSCL_CAElementIcon'
|
||||||
|
>
|
||||||
|
<path d='M256 32C114.6 32 .0272 125.1 .0272 240c0 49.63 21.35 94.98 56.97 130.7c-12.5 50.37-54.27 95.27-54.77 95.77c-2.25 2.25-2.875 5.734-1.5 8.734C1.979 478.2 4.75 480 8 480c66.25 0 115.1-31.76 140.6-51.39C181.2 440.9 217.6 448 256 448c141.4 0 255.1-93.13 255.1-208S397.4 32 256 32z'></path>
|
||||||
|
</svg>
|
||||||
|
<p className='IBMSMSMBSSCL_CAElementText'>12</p>
|
||||||
|
<p className='IBMSMSMBSSCL_CAElementText'>Replies</p>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEReply'>
|
||||||
|
<p className='IBMSMSMBSSCL_CAElementText'>Reply</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|||||||
@ -168,7 +168,7 @@ const ProfileSettings = () => {
|
|||||||
<div
|
<div
|
||||||
className='IBMSMSMSSS_Author_Top_PP'
|
className='IBMSMSMSSS_Author_Top_PP'
|
||||||
style={{
|
style={{
|
||||||
background: `url('assets/img/media-cache%20(4).png') center / cover no-repeat`
|
background: `url('/assets/img/media-cache%20(4).png') center / cover no-repeat`
|
||||||
}}
|
}}
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user