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

35
src/screens/Home.tsx
View file

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