feat: add alerts and logs components on right sidebar
This commit is contained in:
Ivana Andersson
parent
af344e6e70
commit
5f27d7d2f8
|
|
@ -1,8 +1,8 @@
|
|||
import { Avatar, Tabs, Text } from '@status-im/components'
|
||||
import { Avatar, InformationBox, Tabs, Text } from '@status-im/components'
|
||||
import { XStack, YStack } from 'tamagui'
|
||||
import ValidatorListItem from './ValidatorListItem'
|
||||
import InputSearch from './SearchInput'
|
||||
// import { NodeIcon } from '@status-im/icons'
|
||||
import { CloseCircleIcon, ChevronRightIcon } from '@status-im/icons'
|
||||
|
||||
const RightSidebar = () => {
|
||||
return (
|
||||
|
|
@ -34,18 +34,77 @@ const RightSidebar = () => {
|
|||
Inactive
|
||||
</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="active">
|
||||
<Tabs.Content value="active" style={{ marginTop: '16px' }}>
|
||||
<InputSearch />
|
||||
<YStack>
|
||||
<YStack space={'$2'} mt="16px">
|
||||
<ValidatorListItem name={'Validator 1'} avatarKey={'37880sfsef38fsb'} selected={true} />
|
||||
<ValidatorListItem name={'Validator 2'} avatarKey={'37880sfsef38fsb'} />
|
||||
<ValidatorListItem name={'Validator 3'} avatarKey={'37880sfsef38fsb'} />
|
||||
<ValidatorListItem name={'Validator 4'} avatarKey={'37880sfsef38fsb'} />
|
||||
</YStack>
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="pending"></Tabs.Content>
|
||||
<Tabs.Content value="inactive"></Tabs.Content>
|
||||
<Tabs.Content value="pending">
|
||||
<ValidatorListItem name={'Validator 5'} avatarKey={'37880sfsef38fsb'} />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="inactive">
|
||||
<ValidatorListItem name={'Validator 6'} avatarKey={'37880sfsef38fsb'} />
|
||||
</Tabs.Content>
|
||||
</Tabs>
|
||||
|
||||
<YStack space={'$2'}>
|
||||
<XStack justifyContent="space-between">
|
||||
<Text size={15} weight={'semibold'}>
|
||||
Alerts
|
||||
</Text>
|
||||
<div style={{ marginRight: '8px' }}>
|
||||
<ChevronRightIcon size={20} />
|
||||
</div>
|
||||
</XStack>
|
||||
<InformationBox
|
||||
message="Network: Participation rate below 66%"
|
||||
icon={<CloseCircleIcon size={20} />}
|
||||
variant="default"
|
||||
onClosePress={() => alert('dismissed')}
|
||||
/>
|
||||
<InformationBox
|
||||
message="Node: 32 Peers Connected"
|
||||
icon={<CloseCircleIcon size={20} />}
|
||||
variant="information"
|
||||
onClosePress={() => alert('dismissed')}
|
||||
/>
|
||||
<InformationBox
|
||||
message="Node / Validator: Process Down"
|
||||
icon={<CloseCircleIcon size={20} />}
|
||||
variant="error"
|
||||
onClosePress={() => alert('dismissed')}
|
||||
/>
|
||||
</YStack>
|
||||
|
||||
<YStack space={'$2'}>
|
||||
<XStack justifyContent="space-between">
|
||||
<Text size={15} weight={'semibold'}>
|
||||
Logs
|
||||
</Text>
|
||||
<div style={{ marginRight: '8px' }}>
|
||||
<ChevronRightIcon size={20} />
|
||||
</div>
|
||||
</XStack>
|
||||
<InformationBox
|
||||
message="Critical Logs: 0.01 / M"
|
||||
icon={<CloseCircleIcon size={20} />}
|
||||
variant="default"
|
||||
/>
|
||||
<InformationBox
|
||||
message="Warning Logs: 0.01 / M"
|
||||
icon={<CloseCircleIcon size={20} />}
|
||||
variant="default"
|
||||
/>
|
||||
<InformationBox
|
||||
message="Error Logs: 0.01 / M"
|
||||
icon={<CloseCircleIcon size={20} />}
|
||||
variant="default"
|
||||
/>
|
||||
</YStack>
|
||||
</YStack>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
import { useState } from 'react';
|
||||
import { XStack, YStack } from 'tamagui';
|
||||
import { Avatar, Checkbox, Text } from '@status-im/components';
|
||||
import { VerifiedIcon, ContactIcon } from '@status-im/icons';
|
||||
import { useState } from 'react'
|
||||
import { XStack, YStack } from 'tamagui'
|
||||
import { Avatar, Checkbox, Text } from '@status-im/components'
|
||||
import { VerifiedIcon, ContactIcon } from '@status-im/icons'
|
||||
|
||||
type ValidatorListItemProps = {
|
||||
name: string;
|
||||
avatarKey: string;
|
||||
selected?: boolean;
|
||||
};
|
||||
name: string
|
||||
avatarKey: string
|
||||
selected?: boolean
|
||||
}
|
||||
|
||||
const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps) => {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const [isSelected, setIsSelected] = useState(selected);
|
||||
const [hovered, setHovered] = useState(false)
|
||||
const [isSelected, setIsSelected] = useState(selected)
|
||||
|
||||
const handleMouseEnter = () => setHovered(true);
|
||||
const handleMouseLeave = () => setHovered(false);
|
||||
const handleClick = () => setIsSelected(!isSelected);
|
||||
const handleMouseEnter = () => setHovered(true)
|
||||
const handleMouseLeave = () => setHovered(false)
|
||||
const handleClick = () => setIsSelected(!isSelected)
|
||||
|
||||
const backgroundColor = isSelected || hovered ? 'rgba(42, 74, 245, 0.05)' : 'transparent';
|
||||
const backgroundColor = isSelected || hovered ? 'rgba(42, 74, 245, 0.05)' : 'transparent'
|
||||
|
||||
return (
|
||||
<XStack
|
||||
|
|
@ -37,7 +37,7 @@ const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps
|
|||
<Avatar
|
||||
type="user"
|
||||
size={32}
|
||||
name="1"
|
||||
name={name}
|
||||
backgroundColor="$red-50"
|
||||
colorHash={[
|
||||
[3, 30],
|
||||
|
|
@ -56,11 +56,9 @@ const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps
|
|||
<Text size={13}>{avatarKey}</Text>
|
||||
</YStack>
|
||||
</XStack>
|
||||
{isSelected &&
|
||||
<Checkbox id="" variant="outline" size={20} selected={isSelected} />
|
||||
}
|
||||
{isSelected && <Checkbox id="" variant="outline" size={20} selected={isSelected} />}
|
||||
</XStack>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default ValidatorListItem;
|
||||
export default ValidatorListItem
|
||||
|
|
|
|||
Loading…
Reference in New Issue