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

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

@ -4,16 +4,16 @@ import SocialShareBar from './SocialShareBar';
const flags = {
de: (
<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="2" fill="#DD0000"/>
<rect width="5" height="1" fill="#000000"/>
<rect width="5" height="3" fill="#FFCE00" />
<rect width="5" height="2" fill="#DD0000" />
<rect width="5" height="1" fill="#000000" />
</svg>
),
at: (
<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="2" fill="#FFFFFF"/>
<rect width="5" height="1" fill="#ED2939"/>
<rect width="5" height="3" fill="#ED2939" />
<rect width="5" height="2" fill="#FFFFFF" />
<rect width="5" height="1" fill="#ED2939" />
</svg>
)
};
@ -21,14 +21,20 @@ const flags = {
const statusMapping = {
'in_planning': 'in Planung',
'paused': 'pausiert',
'active': 'aktiv'
};
const SubHeader = ({ type, status, url, title }) => (
<div>
{type && <div className="tw-flex tw-items-center tw-mt-4">
<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>
</div>}
<div className="tw-mt-4">
<div className='tw-float-left tw-mt-4 tw-flex tw-items-center'>
{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>}
{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} />
</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']}) => {
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) => (
<SocialShareButton
key={platform}

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

@ -66,7 +66,7 @@ const SocialShareButton = ({ platform, url, title }) => {
href={finalShareUrl}
target='_blank'
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={{
color: 'white',
backgroundColor: bgColor