93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
import { useMemo, useState } from 'react';
|
|
|
|
import { Flex } from '@/components';
|
|
import { getRepositoryFromURL } from '@/utils';
|
|
|
|
import { IndexedNFA } from '../../indexed-nfa.context';
|
|
import { IndexedNFAStyles as S } from '../../indexed-nfa.styles';
|
|
import { Tab, TabContainer } from '../../tabs';
|
|
|
|
const OverviewFragment: React.FC = () => {
|
|
const { nfa } = IndexedNFA.useContext();
|
|
|
|
return (
|
|
<S.Aside.Overview.Container
|
|
css={{ gap: '$4h', p: '$5 $6', height: '336px' }}
|
|
>
|
|
<S.Aside.Overview.Row.Container>
|
|
<S.Aside.Overview.Row.Label>Token ID</S.Aside.Overview.Row.Label>
|
|
<S.Aside.Overview.Row.Value>{nfa.tokenId}</S.Aside.Overview.Row.Value>
|
|
</S.Aside.Overview.Row.Container>
|
|
<S.Aside.Divider.Line />
|
|
<S.Aside.Overview.Row.Container>
|
|
<S.Aside.Overview.Row.Label>Network</S.Aside.Overview.Row.Label>
|
|
<S.Aside.Overview.Row.Value>Mainnet</S.Aside.Overview.Row.Value>
|
|
</S.Aside.Overview.Row.Container>
|
|
<S.Aside.Divider.Line />
|
|
<S.Aside.Overview.Row.Container>
|
|
<S.Aside.Overview.Row.Label>Standard</S.Aside.Overview.Row.Label>
|
|
<S.Aside.Overview.Row.Value>ERC_721</S.Aside.Overview.Row.Value>
|
|
</S.Aside.Overview.Row.Container>
|
|
<S.Aside.Divider.Line />
|
|
<S.Aside.Overview.Row.Container>
|
|
<S.Aside.Overview.Row.Label>Description</S.Aside.Overview.Row.Label>
|
|
</S.Aside.Overview.Row.Container>
|
|
<S.Aside.Overview.Description>
|
|
{nfa.description}
|
|
</S.Aside.Overview.Description>
|
|
</S.Aside.Overview.Container>
|
|
);
|
|
};
|
|
|
|
const PropertiesFragment: React.FC = () => {
|
|
const { nfa } = IndexedNFA.useContext();
|
|
|
|
const traitsToShow = useMemo(() => {
|
|
return [
|
|
[nfa.ENS, 'ENS'],
|
|
[getRepositoryFromURL(nfa.gitRepository.id), 'Repository'],
|
|
[nfa.externalURL, 'Domain'],
|
|
];
|
|
}, [nfa]);
|
|
|
|
return (
|
|
<Flex css={{ flexDirection: 'column', gap: '$3', height: '336px' }}>
|
|
{traitsToShow.map(([value, label], index) => (
|
|
<S.Aside.Overview.Container
|
|
css={{ gap: '$1', p: '$2h $4' }}
|
|
key={index}
|
|
>
|
|
<S.Aside.Overview.Row.Value>
|
|
{value || '-'}
|
|
</S.Aside.Overview.Row.Value>
|
|
<S.Aside.Overview.Row.Label>{label}</S.Aside.Overview.Row.Label>
|
|
</S.Aside.Overview.Container>
|
|
))}
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export const TabFragment: React.FC = () => {
|
|
const [tabSelected, setTabSelected] = useState<number>(0);
|
|
const handleClick = (index: number): void => {
|
|
setTabSelected(index);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<TabContainer>
|
|
{['Overview', 'Properties'].map((label, index) => (
|
|
<Tab
|
|
key={index}
|
|
index={index}
|
|
label={label}
|
|
active={index === tabSelected}
|
|
onTabClick={handleClick}
|
|
/>
|
|
))}
|
|
</TabContainer>
|
|
{tabSelected === 0 ? <OverviewFragment /> : <PropertiesFragment />}
|
|
</>
|
|
);
|
|
};
|