External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

prettify

Browse Source
This commit is contained in:
plebeius.eth
2023-09-16 21:40:23 +02:00
parent d963c90d26
commit 020e509b71
39 changed files with 1970 additions and 2035 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CatalogLoader.jsx
+39 -41
View File
@@ -2,50 +2,48 @@ import React from 'react';
import ContentLoader from 'react-content-loader';
import useGeneralStore from '../hooks/stores/useGeneralStore';
const SingleRectLoader = () => {
const selectedStyle = useGeneralStore((state) => state.selectedStyle);
const backgroundColor = selectedStyle === 'Tomorrow' ? '#333' : '#f3f3f3';
const foregroundColor = selectedStyle === 'Tomorrow' ? '#555' : '#ecebeb';
return (
<ContentLoader
speed={2}
width={150}
height={215}
viewBox="0 0 150 215"
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
style={{
width: '150px',
height: '215px',
marginRight: '30px',
marginBottom: '30px',
}}
>
<rect x={0} y={0} width="150" height="150" />
<rect x={0} y={170} width="150" height="18" />
<rect x={0} y={195} width="80" height="20" />
</ContentLoader>
);
};
const selectedStyle = useGeneralStore((state) => state.selectedStyle);
const backgroundColor = selectedStyle === 'Tomorrow' ? '#333' : '#f3f3f3';
const foregroundColor = selectedStyle === 'Tomorrow' ? '#555' : '#ecebeb';
return (
<ContentLoader
speed={2}
width={150}
height={215}
viewBox='0 0 150 215'
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
style={{
width: '150px',
height: '215px',
marginRight: '30px',
marginBottom: '30px',
}}
>
<rect x={0} y={0} width='150' height='150' />
<rect x={0} y={170} width='150' height='18' />
<rect x={0} y={195} width='80' height='20' />
</ContentLoader>
);
};
const CatalogLoader = () => {
return (
<div
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
boxSizing: 'border-box',
}}
>
{[...Array(24)].map((_, index) => (
<SingleRectLoader key={index} />
))}
</div>
);
return (
<div
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
boxSizing: 'border-box',
}}
>
{[...Array(24)].map((_, index) => (
<SingleRectLoader key={index} />
))}
</div>
);
};
export default CatalogLoader;
export default CatalogLoader;