diff --git a/ui/src/components/card/card-attributes.tsx b/ui/src/components/card/card-attributes.tsx index 934eed1..fc51e45 100644 --- a/ui/src/components/card/card-attributes.tsx +++ b/ui/src/components/card/card-attributes.tsx @@ -16,7 +16,7 @@ export const CardAttributes = ({ heading, info }: CardAttributesProps) => ( width="200px" > - + ); diff --git a/ui/src/components/card/card-site.tsx b/ui/src/components/card/card-site.tsx new file mode 100644 index 0000000..557ebfd --- /dev/null +++ b/ui/src/components/card/card-site.tsx @@ -0,0 +1,101 @@ +import { ImagePreview, TileInfo } from '@/components'; +import { SiteNFTDetail } from '@/types'; +import { useNavigate } from 'react-router-dom'; +import { + Box, + Card, + CardBody, + Heading, + LayoutProps, + Link, + Stack, +} from '@chakra-ui/react'; +import React from 'react'; + +interface CardSiteProps { + site: SiteNFTDetail; + tokenId?: string; // TODO add param and remove optional +} + +type InfoContainerProps = { + heading: string; + info: React.ReactNode; + width: LayoutProps['width']; +}; + +const InfoContainer = ({ heading, info, width }: InfoContainerProps) => ( + +); + +export const SiteCard: React.FC = ({ site, tokenId }) => { + const { name, owner, image, externalUrl } = site; + const navigate = useNavigate(); + return ( + { + navigate(`/detail?tokenId=${1}`); + }} + > + + + {name} + + e.stopPropagation()} + > + + + + + + + {/* TODO add param */} + + e.stopPropagation()} + > + {externalUrl} + + } + /> + + + + ); +}; + diff --git a/ui/src/components/card/index.ts b/ui/src/components/card/index.ts index 83e0c05..fcd6f16 100644 --- a/ui/src/components/card/index.ts +++ b/ui/src/components/card/index.ts @@ -1,2 +1,3 @@ export * from './card-attributes'; +export * from './card-site'; diff --git a/ui/src/components/tile-info/tile-info.tsx b/ui/src/components/tile-info/tile-info.tsx index 80ec6ff..fbc2c8c 100644 --- a/ui/src/components/tile-info/tile-info.tsx +++ b/ui/src/components/tile-info/tile-info.tsx @@ -8,22 +8,36 @@ import { type TileInfoProps = HeadingProps & { heading: string; - info: string; - width?: number; + info: React.ReactNode; + widthText?: number; + textAlignText?: 'center' | 'left'; + direction?: 'column' | 'row'; + alignItems?: string; }; export const TileInfo = forwardRef( - ({ heading, info, width = 250, ...headingProps }, ref) => ( - + ( + { + heading, + info, + widthText = 250, + textAlignText = 'center', + direction = 'column', + alignItems = 'center', + ...headingProps + }, + ref + ) => ( + {heading} {info} diff --git a/ui/src/mocks/index.ts b/ui/src/mocks/index.ts index fcb58a5..8b2343b 100644 --- a/ui/src/mocks/index.ts +++ b/ui/src/mocks/index.ts @@ -1,3 +1,3 @@ export * from './mint-site'; export * from './detail'; - +export * from './list'; diff --git a/ui/src/mocks/list.ts b/ui/src/mocks/list.ts new file mode 100644 index 0000000..1f413dc --- /dev/null +++ b/ui/src/mocks/list.ts @@ -0,0 +1,39 @@ +const listSites = [ + { + tokenId: 1, + name: 'Fleek Test App', + owner: '0x1b5b3e8a7c245d0f2d2b2e29ba11c03ef086c06e', + description: + 'Roronoa Zoro, also known as `Pirate Hunter` Zoro, is the combatant of the Straw Hat Pirates, one of their two swordsmen and one of the Senior Officers of the Straw Hat Grand Fleet. Formerly a bounty hunter, he is the second member of Luffy`s crew and the first to join it, doing so in the Romance Dawn Arc.', + image: + 'https://i.seadn.io/gae/Z0t4BsFONk8ebFnTtog3ricAhEpW_ZPhyhxcjHpofCmslJUc5jQ0OjxUuJbU5-3XE0rJZFf6JVdPFZYqtqyg2ri4gAGRpfwkFcidpw4?auto=format&w=1000', + externalUrl: 'https://onepiece.fandom.com/wiki/Roronoa_Zoro', + ens: 'zoro.eth', + commitHash: '6ea6ad16c46ae85faced7e50555ff7368422f57', + githubRepo: 'https://github.com/fleekxyz/contracts', + }, + { + tokenId: 2, + name: 'Fleek Test App', + owner: '0x1b5b3e8a7c245d0f2d2b2e29ba11c03ef086c06e', + description: + ' Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', + image: 'https://storageapi.fleek.co/fleek-team-bucket/site/fleek-logo.png', + externalUrl: 'https://fleek.co', + ens: 'fleek.eth', + commitHash: '6ea6ad16c46ae85faced7e50555ff7368422f57', + githubRepo: 'https://github.com/fleekxyz/contracts', + }, +]; + +export const fetchMintedSites = async () => { + //TODO get minted sites from api + return new Promise((resolved) => { + setTimeout(() => { + resolved({ + listSites, + }); + }, 2500); + }); +}; + diff --git a/ui/src/views/home/home.tsx b/ui/src/views/home/home.tsx index c47b48f..8ab8596 100644 --- a/ui/src/views/home/home.tsx +++ b/ui/src/views/home/home.tsx @@ -2,15 +2,16 @@ import React from 'react'; import { Heading, Button } from '@chakra-ui/react'; import { Link } from 'react-router-dom'; import { Flex } from '@chakra-ui/react'; +import { ListSites } from './list'; export const Home = () => { return ( - Welcome to Sites as NFTs by Fleek - {/* TODO add list sites */} - + ); }; diff --git a/ui/src/views/home/list.tsx b/ui/src/views/home/list.tsx new file mode 100644 index 0000000..0a56228 --- /dev/null +++ b/ui/src/views/home/list.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Loading } from '@/components'; +import { fetchMintedSites } from '@/mocks'; +import { SiteNFTDetails } from '@/types'; +import { Grid, GridItem } from '@chakra-ui/react'; +import { useQuery } from 'react-query'; +import { SiteCard } from '@/components'; + +export const ListSites = () => { + const { data, isLoading } = useQuery, Error>( + 'fetchSites', + fetchMintedSites + ); + + if (isLoading) return ; + return ( + + {data && + data.listSites.map((site: SiteNFTDetails) => ( + + + + ))} + + ); +}; +