49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { App } from '@/app.context';
|
|
import { Button } from '@/components';
|
|
import { parseNumberToHexColor } from '@/utils/color';
|
|
|
|
import { IndexedNFA } from '../../indexed-nfa.context';
|
|
import { IndexedNFAStyles as S } from '../../indexed-nfa.styles';
|
|
import { ButtonsFragment } from './aside-buttons.fragment';
|
|
import { Header } from './aside-header.fragment';
|
|
import { NFAInfo } from './aside-nfa-info.fragment';
|
|
import { Preview } from './aside-preview.fragment';
|
|
import { TabFragment } from './aside-tabs.fragment';
|
|
|
|
export const IndexedNFAAsideFragment: React.FC = () => {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const [top, setTop] = useState<number>();
|
|
const { nfa } = IndexedNFA.useContext();
|
|
|
|
const { backgroundColor } = App.useContext();
|
|
const background = `radial-gradient(closest-corner circle at 90% 45%, #${backgroundColor}8c 1% ,#${backgroundColor}57 20%, transparent 40%), radial-gradient(closest-corner circle at 60% 25%, #${backgroundColor} 3%, #${backgroundColor}73 30%, #181818 70%)`;
|
|
|
|
useEffect(() => {
|
|
setTop(ref.current?.getBoundingClientRect().top);
|
|
}, [ref]);
|
|
|
|
return (
|
|
<S.Aside.Container
|
|
ref={ref}
|
|
css={{ top, background, backdropFilter: 'blur(10px)' }}
|
|
>
|
|
<Preview />
|
|
<Header />
|
|
<NFAInfo />
|
|
<ButtonsFragment />
|
|
<Button
|
|
as={Link}
|
|
to={`/create-ap/${nfa.tokenId}`}
|
|
css={{
|
|
backgroundColor: `#${parseNumberToHexColor(nfa.color)}`,
|
|
color: 'white',
|
|
}}
|
|
>{`Host ${nfa.name} NFA`}</Button>
|
|
<TabFragment />
|
|
</S.Aside.Container>
|
|
);
|
|
};
|