-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: finalized UI for poap plugin, missing final decision for api ke…
…y handling
- Loading branch information
1 parent
269be5a
commit 271d14a
Showing
7 changed files
with
212 additions
and
24 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
53 changes: 37 additions & 16 deletions
53
packages/@justweb3/poap-plugin/src/lib/components/PoapCard/index.tsx
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,29 +1,50 @@ | ||
| import { P, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@justweb3/ui'; | ||
| import React from 'react'; | ||
| import { POAP } from '../../hooks'; | ||
|
|
||
| interface POAPCardProps { | ||
| poap: POAP; | ||
| poap: POAP; | ||
| } | ||
|
|
||
| const POAPCard: React.FC<POAPCardProps> = ({ poap }) => { | ||
| return ( | ||
| <a href={`https://collectors.poap.xyz/token/${poap.event.id}`} target="_blank" rel="noopener noreferrer"> | ||
| return ( | ||
| <a href={`https://collectors.poap.xyz/token/${poap.event.id}`} target="_blank" rel="noopener noreferrer"> | ||
| <TooltipProvider delayDuration={100}> | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <img | ||
| src={poap.event.image_url} | ||
| alt={poap.event.name} | ||
| width={60} | ||
| height={60} | ||
| style={{ | ||
| background: `url(${poap.event.image_url})`, | ||
| outline: '4px solid var(--justweb3-foreground-color-4)', | ||
| borderRadius: '50%', | ||
| boxShadow: '0px 0px 10px 0px var(--justweb3-foreground-color-2)', | ||
| cursor: 'pointer' | ||
| }} | ||
| src={poap.event.image_url} | ||
| alt={poap.event.name} | ||
| width={60} | ||
| height={60} | ||
| style={{ | ||
| background: `url(${poap.event.image_url})`, | ||
| outline: '4px solid var(--justweb3-foreground-color-4)', | ||
| borderRadius: '50%', | ||
| boxShadow: '0px 0px 10px 0px var(--justweb3-foreground-color-2)', | ||
| cursor: 'pointer' | ||
| }} | ||
| /> | ||
| </a> | ||
| </TooltipTrigger> | ||
| <TooltipContent style={{ zIndex: 9999 }}> | ||
| <P style={{ | ||
| fontSize: '9px', | ||
| fontWeight: 900, | ||
| lineHeight: '150%', | ||
| color: 'inherit' | ||
| }}>#{poap.event.id}</P> | ||
| <P style={{ | ||
| fontSize: '10px', | ||
| fontWeight: 400, | ||
| lineHeight: '150%', | ||
| color: 'inherit' | ||
| }}>{poap.event.name}</P> | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| </a> | ||
|
|
||
| ); | ||
| ); | ||
| }; | ||
|
|
||
| export default POAPCard; |
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
88 changes: 88 additions & 0 deletions
88
packages/@justweb3/ui/src/lib/ui/ToolTip/ToolTip.module.css
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,88 @@ | ||
| .tooltipContent { | ||
| z-index: 190; | ||
| overflow: hidden; | ||
| border-radius: 0.375rem; | ||
| background-color: var(--justweb3-primary-color); | ||
| padding: 4px; | ||
| font-size: 10px; | ||
| color: var(--justweb3-background-color); | ||
| animation: fadeInZoom 0.2s ease-in-out; | ||
| } | ||
|
|
||
| .tooltipContent[data-state='closed'] { | ||
| animation: fadeOutZoom 0.2s ease-in-out; | ||
| } | ||
|
|
||
| .tooltipContent[data-side='top'] { | ||
| animation: slideInFromBottom 0.2s ease-in-out; | ||
| } | ||
|
|
||
| .tooltipContent[data-side='bottom'] { | ||
| animation: slideInFromTop 0.2s ease-in-out; | ||
| } | ||
|
|
||
| .tooltipContent[data-side='left'] { | ||
| animation: slideInFromRight 0.2s ease-in-out; | ||
| } | ||
|
|
||
| .tooltipContent[data-side='right'] { | ||
| animation: slideInFromLeft 0.2s ease-in-out; | ||
| } | ||
|
|
||
| @keyframes fadeInZoom { | ||
| from { | ||
| opacity: 0; | ||
| transform: scale(0.95); | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| transform: scale(1); | ||
| } | ||
| } | ||
|
|
||
| @keyframes fadeOutZoom { | ||
| from { | ||
| opacity: 1; | ||
| transform: scale(1); | ||
| } | ||
| to { | ||
| opacity: 0; | ||
| transform: scale(0.95); | ||
| } | ||
| } | ||
|
|
||
| @keyframes slideInFromTop { | ||
| from { | ||
| transform: translateY(-8px); | ||
| } | ||
| to { | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
|
|
||
| @keyframes slideInFromBottom { | ||
| from { | ||
| transform: translateY(8px); | ||
| } | ||
| to { | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
|
|
||
| @keyframes slideInFromLeft { | ||
| from { | ||
| transform: translateX(-8px); | ||
| } | ||
| to { | ||
| transform: translateX(0); | ||
| } | ||
| } | ||
|
|
||
| @keyframes slideInFromRight { | ||
| from { | ||
| transform: translateX(8px); | ||
| } | ||
| to { | ||
| transform: translateX(0); | ||
| } | ||
| } |
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,27 @@ | ||
| import * as React from "react"; | ||
| import * as TooltipPrimitive from "@radix-ui/react-tooltip"; | ||
| import styles from "./ToolTip.module.css"; | ||
| import clsx from "clsx"; | ||
|
|
||
| const TooltipProvider = TooltipPrimitive.Provider; | ||
|
|
||
| const Tooltip = TooltipPrimitive.Root; | ||
|
|
||
| const TooltipTrigger = TooltipPrimitive.Trigger; | ||
|
|
||
| const TooltipContent = React.forwardRef< | ||
| React.ElementRef<typeof TooltipPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> | ||
| >(({ sideOffset = 4, className, ...props }, ref) => ( | ||
| <TooltipPrimitive.Portal> | ||
| <TooltipPrimitive.Content | ||
| ref={ref} | ||
| sideOffset={sideOffset} | ||
| className={clsx(styles.tooltipContent, className)} | ||
| {...props} | ||
| /> | ||
| </TooltipPrimitive.Portal> | ||
| )); | ||
| TooltipContent.displayName = TooltipPrimitive.Content.displayName; | ||
|
|
||
| export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; |
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,15 +1,16 @@ | ||
| export * from './Avatar'; | ||
| export * from './Button'; | ||
| export * from './Divider'; | ||
| export * from './Input'; | ||
| export * from './Badge'; | ||
| export * from './Button'; | ||
| export * from './Carousel'; | ||
| export * from './Dialog'; | ||
| export * from './Divider'; | ||
| export * from './Dropdown'; | ||
| export * from './Text'; | ||
| export * from './Form'; | ||
| export * from './Input'; | ||
| export * from './LoadingSpinner'; | ||
| export * from './Carousel'; | ||
| export * from './OTPInput'; | ||
| export * from './Popover'; | ||
| export * from './Separator'; | ||
| export * from './OTPInput'; | ||
| export * from './Form'; | ||
| export * from './Tabs'; | ||
| export * from './Text'; | ||
| export * from './ToolTip'; |
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