mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
optimized wc profiles
This commit is contained in:
parent
424a0f6b17
commit
25f3ece3c5
@ -5,7 +5,7 @@ const ContactInfo = ({ email, telephone, name, avatar, link }: { email: string,
|
||||
const assetsApi = useAssetApi();
|
||||
|
||||
return (
|
||||
<div className="tw-bg-gray-100 tw-my-6 tw-p-6">
|
||||
<div className="tw-bg-gray-100 tw-mb-6 tw-mt-6 tw-p-6">
|
||||
<h2 className="tw-text-lg tw-font-semibold">Du hast Fragen?</h2>
|
||||
<div className="tw-mt-4 tw-flex tw-items-center">
|
||||
{avatar && (
|
||||
|
||||
@ -275,7 +275,7 @@ export function OverlayItemProfile({ userType }: { userType: string }) {
|
||||
}
|
||||
|
||||
const typeMapping = {
|
||||
'default': 'Würdekompass',
|
||||
'wuerdekompass': 'Regional-Gruppe',
|
||||
'themenkompass': 'Themenkompass-Gruppe',
|
||||
'liebevoll.jetzt': 'liebevoll.jetzt',
|
||||
};
|
||||
@ -294,24 +294,23 @@ export function OverlayItemProfile({ userType }: { userType: string }) {
|
||||
return (
|
||||
<>
|
||||
{item &&
|
||||
<MapOverlayPage key={item.id}
|
||||
className={`${template == "onepager" && '!tw-p-0'} tw-mx-4 tw-mt-4 tw-mb-4 md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-min-w-80 tw-max-w-3xl !tw-left-0 sm:!tw-left-auto tw-top-0 tw-bottom-0 tw-transition-opacity tw-duration-500 ${!selectPosition ? 'tw-opacity-100 tw-pointer-events-auto' : 'tw-opacity-0 tw-pointer-events-none'}`}>
|
||||
|
||||
<MapOverlayPage key={item.id} className={`!tw-p-0 tw-mx-4 tw-mt-4 tw-mb-4 md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-min-w-80 tw-max-w-3xl !tw-left-0 sm:!tw-left-auto tw-top-0 tw-bottom-0 tw-transition-opacity tw-duration-500 ${!selectPosition ? 'tw-opacity-100 tw-pointer-events-auto' : 'tw-opacity-0 tw-pointer-events-none'}`}>
|
||||
<>
|
||||
<div className={`${template == "onepager" && "tw-px-6 tw-pt-6"}`}>
|
||||
<div className={`tw-px-6 tw-pt-6`}>
|
||||
<HeaderView api={item.layer?.api} item={item} deleteCallback={handleDelete} editCallback={() => navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} />
|
||||
{template == "onepager" && <ProfileSubHeader
|
||||
type={groupTypeText}
|
||||
status={item.status}
|
||||
url={`https://www.wuerdekompass.org/aktivitaeten/gruppensuche/#/gruppe/${item.slug}`}
|
||||
title={item.name}
|
||||
/>}
|
||||
</div>
|
||||
|
||||
|
||||
{template == "onepager" &&
|
||||
<div className='tw-h-full tw-overflow-y-auto fade'>
|
||||
|
||||
<div className="tw-px-6">
|
||||
<ProfileSubHeader
|
||||
type={groupTypeText}
|
||||
status={item.status}
|
||||
url={`https://www.wuerdekompass.org/aktivitaeten/gruppensuche/#/gruppe/${item.slug}`}
|
||||
title={item.name}
|
||||
/>
|
||||
</div>
|
||||
{item.user_created.first_name && (
|
||||
<ContactInfo link={`/item/${profile?.id}`} name={profile?.name ? profile.name : item.user_created.first_name} avatar={profile?.image ? profile.image : item.user_created.avatar} email={item.contact} telephone={item.telephone} />
|
||||
)}
|
||||
@ -349,15 +348,13 @@ export function OverlayItemProfile({ userType }: { userType: string }) {
|
||||
}
|
||||
|
||||
{template == "simple" &&
|
||||
<div className='tw-mt-8 tw-h-full tw-overflow-y-auto fade'>
|
||||
|
||||
|
||||
<div className='tw-mt-8 tw-h-full tw-overflow-y-auto fade tw-px-6'>
|
||||
<TextView item={item} />
|
||||
</div>
|
||||
}
|
||||
|
||||
{template == "tabs" &&
|
||||
<div role="tablist" className="tw-tabs tw-tabs-lifted tw-mt-2 tw-mb-2">
|
||||
<div role="tablist" className="tw-tabs tw-tabs-lifted tw-mt-2 tw-mb-2 tw-px-6">
|
||||
<input type="radio" name="my_tabs_2" role="tab"
|
||||
className={`tw-tab [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`}
|
||||
aria-label="Info" checked={activeTab == 1 && true}
|
||||
|
||||
@ -26,12 +26,13 @@ const statusMapping = {
|
||||
|
||||
const SubHeader = ({ type, status, url, title }) => (
|
||||
<div>
|
||||
<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 className='tw-float-left tw-mt-2 tw-mb-4 tw-flex tw-items-center'>
|
||||
|
||||
{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-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>}
|
||||
{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>
|
||||
{type && type != "Regional-Gruppe" && <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-ml-2 tw-px-2">{type}</span>
|
||||
</div>}
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -2,7 +2,7 @@ import SocialShareButton from './SocialShareButton';
|
||||
|
||||
const SocialShareBar = ({url, title, platforms = ['facebook', 'twitter', 'linkedin', 'xing', 'email']}) => {
|
||||
return (
|
||||
<div className="tw-flex tw-place-content-end tw-justify-end tw-space-x-2 tw-grow tw-min-w-fit">
|
||||
<div className="tw-flex tw-place-content-end tw-justify-end tw-space-x-2 tw-grow tw-min-w-fit tw-pl-2">
|
||||
{platforms.map((platform) => (
|
||||
<SocialShareButton
|
||||
key={platform}
|
||||
|
||||
@ -66,7 +66,7 @@ const SocialShareButton = ({ platform, url, title }) => {
|
||||
href={finalShareUrl}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className='tw-w-8 tw-h-8 tw-mt-4 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-white'
|
||||
className='tw-w-8 tw-h-8 tw-mt-2 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-white'
|
||||
style={{
|
||||
color: 'white',
|
||||
backgroundColor: bgColor
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user