Update details section

This commit is contained in:
Ariful Alam
2022-03-19 17:17:25 +06:00
parent 1a87e391b2
commit ee36b5c49c

View File

@@ -19,9 +19,20 @@ const ListItem = ({ icon, title, value, link }) => {
return ( return (
<div class="flex justify-start py-2 px-1 items-center"> <div class="flex justify-start py-2 px-1 items-center">
<span class="w-2 m-2">{icon}</span> <span class="w-2 m-2">{icon}</span>
<div class="flex-grow font-medium px-2">{title}</div> <div class="flex-grow font-medium px-2">{title}:</div>
<div class="text-sm font-normal text-right mr-2 ml-3"> <div
<a href={link} target="_blank" rel="noreferrer"> class={`text-sm font-normal text-right mr-2 ml-3 ${
link ? 'truncate' : ''
}`}
>
<a
href={link}
target="_blank"
rel="noreferrer"
style={{
wordBreak: 'break-word',
}}
>
{value} {value}
</a> </a>
</div> </div>
@@ -109,202 +120,62 @@ const Details = ({ profile, loading }) => {
link={`https://www.behance.net/${config.social.behance}`} link={`https://www.behance.net/${config.social.behance}`}
/> />
)} )}
</div>
)}
{/* <ul className="menu bg-base-100 text-base-content text-opacity-60">
{loading || !profile ? (
renderSkeleton()
) : (
<>
{typeof config.social.behance !== 'undefined' &&
config.social.behance && (
<li>
<span>
<div>
<FaBehanceSquare className="mr-2" />
</div>
<div>
<a
href={``}
target="_blank"
rel="noreferrer"
className="text-base-content-important"
>
{config.social.behance}
</a>
</div>
</span>
</li>
)}
{typeof config.social.facebook !== 'undefined' && {typeof config.social.facebook !== 'undefined' &&
config.social.facebook && ( config.social.facebook && (
<li> <ListItem
<span> icon={<FaFacebook className="mr-2" />}
<div> title="Facebook"
<FaFacebook className="mr-2" /> value={config.social.facebook}
</div> link={`https://www.facebook.com/${config.social.facebook}`}
<div> />
<a
href={`https://www.facebook.com/${config.social.facebook}`}
target="_blank"
rel="noreferrer"
className="text-base-content-important"
>
{config.social.facebook}
</a>
</div>
</span>
</li>
)} )}
{typeof config.social.medium !== 'undefined' && {typeof config.social.medium !== 'undefined' &&
config.social.medium && ( config.social.medium && (
<li> <ListItem
<span> icon={<AiFillMediumSquare className="mr-2" />}
<div> title="Medium"
<AiFillMediumSquare className="mr-2" /> value={config.social.medium}
</div> link={`https://medium.com/@${config.social.medium}`}
<div> />
<a
href={`https://medium.com/@${config.social.medium}`}
target="_blank"
rel="noreferrer"
className="text-base-content-important"
>
{config.social.medium}
</a>
</div>
</span>
</li>
)} )}
{typeof config.social.devto !== 'undefined' && {typeof config.social.devto !== 'undefined' &&
config.social.devto && ( config.social.devto && (
<li> <ListItem
<span> icon={<FaDev className="mr-2" />}
<div> title="Dev"
<FaDev className="mr-2" /> value={config.social.devto}
</div> link={`https://dev.to/${config.social.devto}`}
<div> />
<a
href={`https://dev.to/${config.social.devto}`}
target="_blank"
rel="noreferrer"
className="text-base-content-important"
>
{config.social.devto}
</a>
</div>
</span>
</li>
)} )}
{typeof config.social.website !== 'undefined' && {typeof config.social.website !== 'undefined' &&
config.social.website && ( config.social.website && (
<li> <ListItem
<span> icon={<FaGlobe className="mr-2" />}
<div> title="Website"
<FaGlobe className="mr-2" /> value={config.social.website}
</div> link={config.social.website}
<div> />
<a
href={`${config.social.website}`}
target="_blank"
rel="noreferrer"
className="text-base-content-important"
>
{config.social.website}
</a>
</div>
</span>
</li>
)} )}
{typeof config.social.phone !== 'undefined' && {typeof config.social.phone !== 'undefined' &&
config.social.phone && ( config.social.phone && (
<li> <ListItem
<span> icon={<RiPhoneFill className="mr-2" />}
<div> title="Phone"
<RiPhoneFill className="mr-2" /> value={config.social.phone}
</div> link={`tel:${config.social.phone}`}
<div> />
<a
href={`tel:${config.social.phone}`}
rel="noreferrer"
className="text-base-content-important"
>
{config.social.phone}
</a>
</div>
</span>
</li>
)} )}
{typeof config.social.email !== 'undefined' && {typeof config.social.email !== 'undefined' &&
config.social.email && ( config.social.email && (
<li> <ListItem
<span> icon={<MdMail className="mr-2" />}
<div> title="Email"
<MdMail className="mr-2" /> value={config.social.email}
</div> link={`mailto:${config.social.email}`}
<div> />
<a
href={`mailto:${config.social.email}`}
target="_blank"
rel="noreferrer"
className="text-base-content-important"
>
{config.social.email}
</a>
</div>
</span>
</li>
)} )}
</> </div>
)} )}
</ul> */}
{/* <div class="bg-base-100 text-base-content text-opacity-60">
<div class="flex justify-start px-2 py-2 my-2 items-center">
<span class="w-2 m-2 rounded-full">
<MdLocationOn className="mr-2" />
</span>
<div class="flex-grow font-medium px-2">Based on</div>
<div class="text-sm font-normal text-gray-500 tracking-wide">
London
</div>
</div>
<div class="flex justify-start cursor-pointer text-gray-700 hover:text-blue-400 hover:bg-blue-100 rounded-md px-2 py-2 my-2">
<span class="bg-green-400 h-2 w-2 m-2 rounded-full"></span>
<div class="flex-grow font-medium px-2">Taylor Otwell</div>
<div class="text-sm font-normal text-gray-500 tracking-wide">
Member
</div>
</div>
<div class="flex justify-start cursor-pointer text-gray-700 hover:text-blue-400 hover:bg-blue-100 rounded-md px-2 py-2 my-2">
<span class="bg-gray-400 h-2 w-2 m-2 rounded-full"></span>
<div class="flex-grow font-medium px-2">Adam Wathan</div>
<div class="text-sm font-normal text-gray-500 tracking-wide">
Member
</div>
</div>
<div class="flex justify-start cursor-pointer text-gray-700 hover:text-blue-400 hover:bg-blue-100 rounded-md px-2 py-2 my-2">
<span class="bg-gray-400 h-2 w-2 m-2 rounded-full"></span>
<div class="flex-grow font-medium px-2">
Duke Street Studio Inc.
</div>
<div class="text-sm font-normal text-gray-500 tracking-wide">
Team
</div>
</div>
<div class="flex justify-start cursor-pointer text-gray-700 hover:text-blue-400 hover:bg-blue-100 rounded-md px-2 py-2 my-2">
<span class="bg-green-400 h-2 w-2 m-2 rounded-full"></span>
<div class="flex-grow font-medium px-2">Jeffrey Wey</div>
<div class="text-sm font-normal text-gray-500 tracking-wide">
Member
</div>
</div>
</div> */}
</div> </div>
</div> </div>
); );