antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

optimized wc profiles

Browse Source
This commit is contained in:
Anton Tranelis 2024-07-20 15:23:29 +02:00
parent 570e247d43
commit b707b8204b
3 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/Components/Profile/ProfileSubHeader.tsx
View File

@ -4,16 +4,16 @@ import SocialShareBar from './SocialShareBar';
const flags = { const flags = {
de: ( de: (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" className="tw-w-5 tw-h-3"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" className="tw-w-5 tw-h-3">
<rect width="5" height="3" fill="#FFCE00"/> <rect width="5" height="3" fill="#FFCE00" />
<rect width="5" height="2" fill="#DD0000"/> <rect width="5" height="2" fill="#DD0000" />
<rect width="5" height="1" fill="#000000"/> <rect width="5" height="1" fill="#000000" />
</svg> </svg>
), ),
at: ( at: (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" className="tw-w-5 tw-h-3"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" className="tw-w-5 tw-h-3">
<rect width="5" height="3" fill="#ED2939"/> <rect width="5" height="3" fill="#ED2939" />
<rect width="5" height="2" fill="#FFFFFF"/> <rect width="5" height="2" fill="#FFFFFF" />
<rect width="5" height="1" fill="#ED2939"/> <rect width="5" height="1" fill="#ED2939" />
</svg> </svg>
) )
}; };
@ -21,14 +21,20 @@ const flags = {
const statusMapping = { const statusMapping = {
'in_planning': 'in Planung', 'in_planning': 'in Planung',
'paused': 'pausiert', 'paused': 'pausiert',
'active': 'aktiv'
}; };
const SubHeader = ({ type, status, url, title }) => ( const SubHeader = ({ type, status, url, title }) => (
<div> <div>
{type && <div className="tw-flex tw-items-center tw-mt-4"> <div className='tw-float-left tw-mt-4 tw-flex tw-items-center'>
<span className="tw-text-sm tw-text-gray-600 tw-bg-slate-200 tw-rounded tw-py-1 tw-px-2">{type}{(status && status !== 'active') ? ` (${statusMapping[status]})` : ''}</span> {type && <div className="tw-mt-1.5">
<span className="tw-text-sm tw-text-gray-600 tw-bg-slate-200 tw-rounded tw-py-1 tw-px-2">{type}</span>
</div>} </div>}
<div className="tw-mt-4"> {status && status!="active" && <div className="tw-mt-1.5">
<span className="tw-text-sm tw-text-gray-600 tw-bg-slate-200 tw-rounded tw-py-0.5 tw-px-2 tw-ml-2 tw-inline-flex tw-items-center"><span className={`tw-w-2 tw-h-2 ${ status=="in_planning" && "tw-bg-blue-700"} ${ status=="paused" && "tw-bg-orange-400"} ${ status=="active" && "tw-bg-green-500"} tw-rounded-full tw-mr-1.5`}></span>{statusMapping[status]}</span>
</div>}
</div>
<div>
<SocialShareBar url={url} title={title} /> <SocialShareBar url={url} title={title} />
</div> </div>
</div> </div>

2
src/Components/Profile/SocialShareBar.tsx
View File

@ -2,7 +2,7 @@ import SocialShareButton from './SocialShareButton';
const SocialShareBar = ({url, title, platforms = ['facebook', 'twitter', 'linkedin', 'xing', 'email']}) => { const SocialShareBar = ({url, title, platforms = ['facebook', 'twitter', 'linkedin', 'xing', 'email']}) => {
return ( return (
<div className="tw-flex tw-items-center tw-justify-end tw-space-x-2"> <div className="tw-flex tw-place-content-end tw-justify-end tw-space-x-2 tw-grow tw-min-w-fit">
{platforms.map((platform) => ( {platforms.map((platform) => (
<SocialShareButton <SocialShareButton
key={platform} key={platform}

2
src/Components/Profile/SocialShareButton.tsx
View File

@ -66,7 +66,7 @@ const SocialShareButton = ({ platform, url, title }) => {
href={finalShareUrl} href={finalShareUrl}
target='_blank' target='_blank'
rel='noopener noreferrer' rel='noopener noreferrer'
className='tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-white' className='tw-w-8 tw-h-8 tw-mt-4 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-white'
style={{ style={{
color: 'white', color: 'white',
backgroundColor: bgColor backgroundColor: bgColor