80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { FC } from 'react';
|
|
import clsx from 'clsx';
|
|
import Image from 'next/image';
|
|
import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
|
|
export const PicksSocialsComponent: FC<{ toolTip?: boolean }> = ({
|
|
toolTip,
|
|
}) => {
|
|
const { addOrRemoveSelectedIntegration, integrations, selectedIntegrations } =
|
|
useLaunchStore(
|
|
useShallow((state) => ({
|
|
integrations: state.integrations,
|
|
selectedIntegrations: state.selectedIntegrations,
|
|
addOrRemoveSelectedIntegration: state.addOrRemoveSelectedIntegration,
|
|
}))
|
|
);
|
|
return (
|
|
<div className={clsx('flex')}>
|
|
<div className="flex">
|
|
<div className="innerComponent">
|
|
<div className="flex">
|
|
{integrations
|
|
.filter((f) => !f.inBetweenSteps)
|
|
.map((integration) => (
|
|
<div
|
|
key={integration.id}
|
|
className="flex gap-[8px] items-center me-[10px]"
|
|
{...(toolTip && {
|
|
'data-tooltip-id': 'tooltip',
|
|
'data-tooltip-content': integration.name,
|
|
})}
|
|
>
|
|
<div
|
|
onClick={() =>
|
|
addOrRemoveSelectedIntegration(integration, {})
|
|
}
|
|
className={clsx(
|
|
'cursor-pointer relative w-[34px] h-[34px] rounded-full flex justify-center items-center bg-fifth filter transition-all duration-500',
|
|
selectedIntegrations.findIndex(
|
|
(p) => p.integration.id === integration.id
|
|
) === -1
|
|
? 'opacity-40'
|
|
: ''
|
|
)}
|
|
>
|
|
<Image
|
|
src={integration.picture || '/no-picture.jpg'}
|
|
className="rounded-full"
|
|
alt={integration.identifier}
|
|
width={32}
|
|
height={32}
|
|
/>
|
|
{integration.identifier === 'youtube' ? (
|
|
<img
|
|
src="/icons/platforms/youtube.svg"
|
|
className="absolute z-10 -bottom-[5px] -end-[5px]"
|
|
width={20}
|
|
/>
|
|
) : (
|
|
<Image
|
|
src={`/icons/platforms/${integration.identifier}.png`}
|
|
className="rounded-full absolute z-10 -bottom-[5px] -end-[5px] border border-fifth"
|
|
alt={integration.identifier}
|
|
width={20}
|
|
height={20}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|