learning/ignitegym
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add exercise list

Browse source 
format code
This commit is contained in:
Vinicius Souza 2024-10-25 15:08:57 -03:00
parent 4d3fd4d8d3
commit b3480ec8da
2 changed files with 29 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/HomeHeader.tsx
View file

@ -1,22 +1,18 @@
import { Heading, HStack, Icon, Text, VStack } from "@gluestack-ui/themed"; import { Heading, HStack, Icon, Text, VStack } from '@gluestack-ui/themed';
import { LogOut } from "lucide-react-native"; import { LogOut } from 'lucide-react-native';
import { UserPhoto } from "./UserPhoto"; import { UserPhoto } from './UserPhoto';
export function HomeHeader() { export function HomeHeader() {
return ( return (
<HStack bg="$gray600" pt="$16" pb="$5" px="$8" alignItems="center" gap="$4"> <HStack bg="$gray600" pt="$16" pb="$5" px="$8" alignItems="center" gap="$4">
<UserPhoto <UserPhoto source={{ uri: 'https://i.pravatar.cc/200' }} alt="avatar image" h="$16" w="$16" />
source={{ uri: 'https://i.pravatar.cc/200' }}
alt="avatar image"
h="$16"
w="$16"
/>
<VStack flex={1}> <VStack flex={1}>
<Text color="$gray100" fontSize="$sm"> <Text color="$gray100" fontSize="$sm">
Olá, Olá,
</Text> </Text>
<Heading color="$gray100" fontSize="$md"> <Heading color="$gray100" fontSize="$md">
John Doe John Doe
</Heading> </Heading>
@ -24,5 +20,5 @@ export function HomeHeader() {
<Icon as={LogOut} color="$gray200" size="xl" /> <Icon as={LogOut} color="$gray200" size="xl" />
</HStack> </HStack>
) );
} }

35
src/screens/Home.tsx
View file

@ -1,12 +1,15 @@
import { useState } from "react"; import { useState } from 'react';
import { FlatList, Heading, HStack, Text, VStack } from "@gluestack-ui/themed"; import { FlatList } from 'react-native';
import { Heading, HStack, Text, VStack } from '@gluestack-ui/themed';
import { HomeHeader } from "@components/HomeHeader"; import { HomeHeader } from '@components/HomeHeader';
import { Group } from "@components/Group"; import { Group } from '@components/Group';
import { ExerciseCard } from '@components/ExerciseCard';
export function Home() { export function Home() {
const [groups, setGroups] = useState<string[]>(['costas', 'bíceps', 'tríceps', 'ombro', 'peito', 'pernas']) const [exercises] = useState<string[]>(['1', '2', '3', '4', '5', '6']);
const [selectedGroup, setSelectedGroup] = useState("costas"); const [groups] = useState<string[]>(['costas', 'bíceps', 'tríceps', 'ombro', 'peito', 'pernas']);
const [selectedGroup, setSelectedGroup] = useState('costas');
return ( return (
<VStack flex={1}> <VStack flex={1}>
@ -14,12 +17,12 @@ export function Home() {
<FlatList <FlatList
data={groups} data={groups}
keyExtractor={(item) => item as string} keyExtractor={(item) => item}
renderItem={({ item }) => ( renderItem={({ item }) => (
<Group <Group
name={item as string} name={item}
isActive={selectedGroup === item} isActive={selectedGroup.toLowerCase() === item.toLowerCase()}
onPress={() => setSelectedGroup(item as string)} onPress={() => setSelectedGroup(item)}
/> />
)} )}
horizontal horizontal
@ -32,7 +35,7 @@ export function Home() {
}} }}
/> />
<VStack px="$8"> <VStack px="$8" flex={1}>
<HStack justifyContent="space-between" mb="$5" alignItems="center"> <HStack justifyContent="space-between" mb="$5" alignItems="center">
<Heading color="$gray200" fontSize="$md"> <Heading color="$gray200" fontSize="$md">
Exercícios Exercícios
@ -42,7 +45,15 @@ export function Home() {
4 4
</Text> </Text>
</HStack> </HStack>
<FlatList
data={exercises}
keyExtractor={(item) => item}
renderItem={({ item }) => <ExerciseCard name={item} />}
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 20 }}
/>
</VStack> </VStack>
</VStack> </VStack>
) );
} }