zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Front: Home View: Competencies Table is clickable

Browse Source
This commit is contained in:
Arthi-chaud
2022-10-07 12:38:24 +01:00
parent aa5c3c2ab3
commit ab3ba6b8c0
1 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
front/components/CompetenciesTable.tsx
View File

@@ -1,4 +1,5 @@
import { HStack, VStack, Text, Progress } from "native-base";
import { useNavigation } from "@react-navigation/core";
import { HStack, VStack, Text, Progress, Pressable } from "native-base";
import { translate } from "../i18n/i18n";
import Card from './Card';
type CompetenciesTableProps = {
@@ -11,21 +12,26 @@ type CompetenciesTableProps = {
}
const CompetenciesTable = (props: CompetenciesTableProps) => {
return <Card padding={5}>
<HStack space={5} flex={1}>
<VStack space={5}>
{ Object.keys(props).map((competencyName) => (
<Text bold>{translate(competencyName as keyof CompetenciesTableProps)}</Text>
))}
</VStack>
<VStack space={5} flex={1}>
{ Object.keys(props).map((competencyName) => (
<Progress flex={1} value={props[competencyName as keyof CompetenciesTableProps]} />
))}
</VStack>
</HStack>
</Card>
const navigation = useNavigation();
return <Pressable onPress={() => navigation.navigate('User')}>
{({ isHovered, isFocused }) => (
<Card padding={5} bg={(isHovered || isFocused) ? 'coolGray.200' : undefined }>
<HStack space={5} flex={1}>
<VStack space={5}>
{ Object.keys(props).map((competencyName) => (
<Text bold>{translate(competencyName as keyof CompetenciesTableProps)}</Text>
))}
</VStack>
<VStack space={5} flex={1}>
{ Object.keys(props).map((competencyName) => (
<Progress flex={1} value={props[competencyName as keyof CompetenciesTableProps]} />
))}
</VStack>
</HStack>
</Card>
)}
</Pressable>
}
export default CompetenciesTable