-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ feat: support nested italic / bold / link text
- Loading branch information
Showing
14 changed files
with
451 additions
and
599 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,123 +1,134 @@ | ||
| import React from 'react'; | ||
| import React from "react"; | ||
|
|
||
| import { ProfileData } from '@/types/profile'; | ||
|
|
||
| import EditableText from '@/components/toolkit/EditableText'; | ||
| import EditableText from "@/components/toolkit/EditableText"; | ||
| import { ProfileData } from "@/types/profile"; | ||
|
|
||
| interface ProfileListProps { | ||
| data: ProfileData; | ||
| theme?: string | ||
| data: ProfileData; | ||
| theme?: string; | ||
| } | ||
|
|
||
| const ProfileListAvatar: React.FC<ProfileListProps> = ({ data }) => { | ||
| return ( | ||
| <div className='flex justify-between items-center custom-profile'> | ||
|
|
||
| <div className='flex items-center'> | ||
| {data.avatar && ( | ||
| <div className='w-[80px] h-[100px] mr-6'> | ||
| <img src={data.avatar} className='w-full h-full' /> | ||
| </div> | ||
| )} | ||
| <div className='ml-2'> | ||
| <p className='text-xl mt-1 mb-3 theme-text-color'> | ||
| {data.name && <EditableText text={data.name} path={`profile.name`} className={'font-bold'} />} | ||
| </p> | ||
| {data.footnote?.map((footnote, footIndex) => ( | ||
| <p className='text-sm mt-2' key={footIndex}> | ||
| <EditableText text={footnote.label} path={`profile.footnote[${footIndex}].label`} | ||
| className='font-semibold theme-text-color' | ||
| /> | ||
| {footnote.label && footnote.content && <span>: </span>} | ||
| <EditableText text={footnote.content} path={`profile.footnote[${footIndex}].content`} | ||
| className='font-normal' | ||
| /> | ||
| </p> | ||
| ))} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className='flex flex-col ml-20 mt-2 text-[12.75px]'> | ||
| {data.contact?.map((contact, conIndex) => ( | ||
| <p className='flex' key={conIndex}> | ||
| {contact.icon && | ||
| <EditableText type={'icon'} text={contact.icon.trim()} path={`profile.contact[${conIndex}].icon`} | ||
| className='w-4 h-4 mr-1 theme-text-color' | ||
| />} | ||
| {contact.key && | ||
| <span className='theme-text-color mt-0.5'> | ||
| <EditableText text={contact.key} path={`profile.contact[${conIndex}].key`} className='font-bold' /> | ||
| : | ||
| </span> | ||
| } | ||
| {contact.value && <EditableText type={'link'} text={contact.value} path={`profile.contact[${conIndex}].value`} />} | ||
| </p> | ||
| ))} | ||
| </div> | ||
|
|
||
| return ( | ||
| <div className="flex justify-between items-center custom-profile"> | ||
| <div className="flex items-center"> | ||
| {data.avatar && ( | ||
| <div className="w-[80px] h-[100px] mr-6"> | ||
| <img src={data.avatar} className="w-full h-full" /> | ||
| </div> | ||
| )} | ||
| <div className="ml-2"> | ||
| <p className="text-xl mt-1 mb-3 theme-text-color"> | ||
| {data.name && ( | ||
| <EditableText | ||
| text={data.name} | ||
| path={`profile.name`} | ||
| className={"font-bold"} | ||
| /> | ||
| )} | ||
| </p> | ||
| {data.footnote?.map((note, noteIndex) => ( | ||
| <p className="text-sm mt-2" key={noteIndex}> | ||
| <EditableText | ||
| text={note} | ||
| path={`profile.footnote[${noteIndex}].label`} | ||
| /> | ||
| </p> | ||
| ))} | ||
| </div> | ||
| ); | ||
| </div> | ||
|
|
||
| <div className="flex flex-col ml-20 mt-2 text-[12.75px]"> | ||
| {data.contact?.map((contact, conIndex) => ( | ||
| <p className="flex" key={conIndex}> | ||
| {contact.icon && ( | ||
| <EditableText | ||
| type={"icon"} | ||
| text={contact.icon.trim()} | ||
| path={`profile.contact[${conIndex}].icon`} | ||
| className="w-4 h-4 mr-1 theme-text-color" | ||
| /> | ||
| )} | ||
| {contact.value && ( | ||
| <EditableText | ||
| text={contact.value} | ||
| path={`profile.contact[${conIndex}].value`} | ||
| /> | ||
| )} | ||
| </p> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const ProfileListPlain: React.FC<ProfileListProps> = ({ data }) => { | ||
| return ( | ||
| <div className='custom-profile'> | ||
|
|
||
| <div className='flex-grow flex-shrink'> | ||
| <p className='text-xl font-bold text-gray-800 text-center mt-2 theme-text-color'> | ||
| <EditableText text={data.name} path={`profile.name`} /> | ||
| </p> | ||
|
|
||
| {data.footnote && data?.footnote?.length > 0 && ( | ||
| <div className='flex flex-wrap justify-center items-center text-sm gap-1 mt-1'> | ||
| {data.footnote?.map((footnote, footIndex) => ( | ||
| <div className='flex justify-center items-center plain-footnote-item' key={footIndex} style={{ flexBasis: 'auto' }}> | ||
| <div className='flex justify-center items-center'> | ||
| <EditableText text={footnote.label} path={`profile.footnote[${footIndex}].label`} | ||
| className='font-semibold theme-text-color' /> | ||
| {footnote.label && footnote.content && <span className='theme-text-color'>: </span>} | ||
| {footnote.content && <EditableText text={footnote.content} path={`profile.footnote[${footIndex}].content`} />} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| )} | ||
| return ( | ||
| <div className="custom-profile"> | ||
| <div className="flex-grow flex-shrink"> | ||
| <p className="text-xl font-bold text-gray-800 text-center mt-2 theme-text-color"> | ||
| {data.name && <EditableText text={data.name} path={`profile.name`} />} | ||
| </p> | ||
|
|
||
| <div className='flex flex-wrap justify-center items-center text-[13.5px] mt-1'> | ||
| {data.contact?.map((item, index) => ( | ||
| <div className='flex justify-center items-center plain-contact-item' key={index} style={{ flexBasis: 'auto' }}> | ||
| <div className='flex items-center'> | ||
| {item.icon && | ||
| <EditableText type={'icon'} text={item.icon.trim()} path={`profile.contact[${index}].icon`} | ||
| className='w-4 h-4 mr-0.5 theme-text-color' | ||
| /> | ||
| } | ||
| {item.key && ( | ||
| <span className='theme-text-color'> | ||
| <EditableText text={item.key} path={`profile.contact[${index}].key`} className={'font-bold '} /> | ||
| : | ||
| </span> | ||
| )} | ||
| {item.value && <EditableText type={'link'} text={item.value} path={`profile.contact[${index}].value`} />} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| {data.footnote && data.footnote?.length > 0 && ( | ||
| <div className="flex flex-wrap justify-center items-center text-sm gap-1 mt-1"> | ||
| {data.footnote?.map((note, noteIndex) => ( | ||
| <div | ||
| className="flex justify-center items-center plain-footnote-item" | ||
| key={noteIndex} | ||
| style={{ flexBasis: "auto" }} | ||
| > | ||
| <div className="flex justify-center items-center"> | ||
| <EditableText | ||
| text={note} | ||
| path={`profile.footnote[${noteIndex}].label`} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| )} | ||
|
|
||
| <div className="flex flex-wrap justify-center items-center text-[13.5px] mt-1"> | ||
| {data.contact?.map((item, index) => ( | ||
| <div | ||
| className="flex justify-center items-center plain-contact-item" | ||
| key={index} | ||
| style={{ flexBasis: "auto" }} | ||
| > | ||
| <div className="flex items-center"> | ||
| {item.icon && ( | ||
| <EditableText | ||
| type={"icon"} | ||
| text={item.icon.trim()} | ||
| path={`profile.contact[${index}].icon`} | ||
| className="w-4 h-4 mr-0.5 theme-text-color" | ||
| /> | ||
| )} | ||
| {item.value && ( | ||
| <EditableText | ||
| text={item.value} | ||
| path={`profile.contact[${index}].value`} | ||
| /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div > | ||
| ); | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const ProfileList: React.FC<ProfileListProps> = ({ data, theme }) => { | ||
| switch (theme) { | ||
| case 'avatar': | ||
| return <ProfileListAvatar data={data} />; | ||
| case 'plain': | ||
| return <ProfileListPlain data={data} />; | ||
| default: | ||
| return <ProfileListAvatar data={data} />; | ||
| } | ||
| switch (theme) { | ||
| case "avatar": | ||
| return <ProfileListAvatar data={data} />; | ||
| case "plain": | ||
| return <ProfileListPlain data={data} />; | ||
| default: | ||
| return <ProfileListAvatar data={data} />; | ||
| } | ||
| }; | ||
|
|
||
| export default ProfileList; | ||
| export default ProfileList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.