-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ENG-3859 feat(portal): better navigation between list details list id…
…entity and tag claim (#822) ## Affected Packages Apps - [x] portal Packages - [ ] 1ui - [ ] api - [ ] protocol - [ ] sdk Tools - [ ] tools ## Overview This adds navigation elements to detail pages which link to any associated lists. This might change a bit after we make some modifications to lists, but in the meantime, this'll do. ## Screen Captures If applicable, add screenshots or screen captures of your changes. ## Declaration - [x] I hereby declare that I have abided by the rules and regulations as outlined in the [CONTRIBUTING.md](https://github.com/0xIntuition/intuition-ts/blob/main/CONTRIBUTING.md) **PR Summary by Typo** ------------ **Summary** This pull request introduces a new `DetailInfoCard` component and updates imports in various files. It replaces `InfoCard` with `DetailInfoCard` in some components and adds new properties and imports. **Key Points** 1. New `DetailInfoCard` component added in `apps/portal/app/components/detail-info-card.tsx` 2. Replaces `InfoCard` with `DetailInfoCard` in `ClaimDetails` and imports new dependencies 3. Updates `IdentityLoaderData` interface and `useLiveLoader` hook to load `DetailInfoCard` and new `list` property. <h6>To turn off PR summary, please visit <a href="https://app.typoapp.io/settings/dev-analytics/notification?tab=codeHealth">Notification settings</a>.</h6>
- Loading branch information
1 parent
2af07ea
commit 4647685
Showing
3 changed files
with
180 additions
and
20 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| import { | ||
| Button, | ||
| ButtonVariant, | ||
| cn, | ||
| HoverCard, | ||
| HoverCardContent, | ||
| HoverCardTrigger, | ||
| Icon, | ||
| Identity, | ||
| IdentityTag, | ||
| IdentityType, | ||
| ProfileCard, | ||
| Text, | ||
| TextVariant, | ||
| Trunctacular, | ||
| } from '@0xintuition/1ui' | ||
| import { ClaimPresenter } from '@0xintuition/api' | ||
|
|
||
| import { PATHS } from '@consts/paths' | ||
|
|
||
| export interface DetailInfoCardProps | ||
| extends React.HTMLAttributes<HTMLDivElement> { | ||
| variant: IdentityType | ||
| list?: ClaimPresenter | ||
| username: string | ||
| avatarImgSrc: string | ||
| id: string | ||
| description: string | ||
| link: string | ||
| ipfsLink: string | ||
| timestamp: string | ||
| } | ||
|
|
||
| const DetailInfoCard = ({ | ||
| variant = Identity.user, | ||
| list, | ||
| username, | ||
| avatarImgSrc, | ||
| id, | ||
| description, | ||
| link, | ||
| ipfsLink, | ||
| timestamp, | ||
| className, | ||
| ...props | ||
| }: DetailInfoCardProps) => { | ||
| const formattedDate = new Intl.DateTimeFormat('en-US', { | ||
| year: 'numeric', | ||
| month: 'long', | ||
| day: 'numeric', | ||
| }).format(new Date(timestamp)) | ||
|
|
||
| return ( | ||
| <div | ||
| className={cn( | ||
| `flex flex-col gap-5 theme-border p-5 rounded-lg max-sm:items-center`, | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| {list && ( | ||
| <div> | ||
| <Text variant={TextVariant.caption} className="text-muted-foreground"> | ||
| List | ||
| </Text> | ||
| <div className="flex justify-start items-center gap-1"> | ||
| <a href={`${PATHS.LIST}/${list.claim_id}`}> | ||
| <IdentityTag | ||
| variant={list.object?.user ? Identity.user : Identity.nonUser} | ||
| imgSrc={list.object?.image ?? ''} | ||
| > | ||
| <Trunctacular | ||
| value={ | ||
| list.object?.user_display_name ?? | ||
| list.object?.display_name ?? | ||
| 'Unknown' | ||
| } | ||
| maxStringLength={32} | ||
| /> | ||
| </IdentityTag> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| )} | ||
| <div> | ||
| <Text variant={TextVariant.caption} className="text-muted-foreground"> | ||
| Creator | ||
| </Text> | ||
| <div className="flex justify-start items-center gap-1"> | ||
| <HoverCard openDelay={150} closeDelay={150}> | ||
| <HoverCardTrigger> | ||
| <a href={link}> | ||
| <IdentityTag variant={variant} imgSrc={avatarImgSrc}> | ||
| <Trunctacular value={username} maxStringLength={18} /> | ||
| </IdentityTag> | ||
| </a> | ||
| </HoverCardTrigger> | ||
| <HoverCardContent side="right" className="w-max"> | ||
| <div className="flex flex-col gap-4 w-80 max-md:w-[80%]"> | ||
| <ProfileCard | ||
| variant={variant} | ||
| avatarSrc={avatarImgSrc ?? ''} | ||
| name={username} | ||
| id={id ?? ''} | ||
| bio={description ?? ''} | ||
| ipfsLink={ipfsLink} | ||
| className="profile-card" | ||
| /> | ||
| {link && ( | ||
| <a href={link}> | ||
| <Button | ||
| variant={ButtonVariant.secondary} | ||
| className="w-full" | ||
| > | ||
| View Identity{' '} | ||
| <Icon name={'arrow-up-right'} className="h-3 w-3" /> | ||
| </Button> | ||
| </a> | ||
| )} | ||
| </div> | ||
| </HoverCardContent> | ||
| </HoverCard> | ||
| <span className="bg-muted-foreground h-[2px] w-[2px] block rounded-full" /> | ||
| <Text variant={TextVariant.body} className="text-muted-foreground"> | ||
| {formattedDate} | ||
| </Text> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export { DetailInfoCard } |
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