1
00:00:02,300 --> 00:00:07,270
Para estilizar os itens separados, criarei novamente um componente separado e o

2
00:00:07,350 --> 00:00:11,620
nomeei como item de refeição. js, o nome como

3
00:00:11,640 --> 00:00:15,320
sempre é totalmente de sua responsabilidade e, lá,

4
00:00:15,320 --> 00:00:18,200
você conhece o jogo, criamos um

5
00:00:18,440 --> 00:00:25,360
componente React importando React, provavelmente também precisaremos de exibição, texto e folha de estilo e

6
00:00:25,460 --> 00:00:32,610
talvez também algumas outras coisas do React Native. Em seguida, configuramos o componente, item de refeição, onde recebemos adereços

7
00:00:32,610 --> 00:00:38,010
e, em seguida, retornamos alguns jsx no final. Configure uma folha de estilo aqui, armazene-a em uma constante de estilos com a criação

8
00:00:38,010 --> 00:00:46,090
de folha de estilo para a qual passamos um objeto e, no final, exportamos nosso item de refeição aqui como o arquivo padrão. Agora, com isso aqui, no item de refeição, neste componente, é

9
00:00:46,090 --> 00:00:48,100
claro que precisamos retornar algum

10
00:00:48,100 --> 00:00:54,040
código jsx para esse item de refeição e isso é algo que recebo da tela de categoria

11
00:00:54,040 --> 00:00:55,750
de refeição. Aí eu

12
00:00:55,810 --> 00:01:02,260
tenho essa visão com o meu texto aqui, é no final o que eu quero saída, um pouco mais complexo do que isso,

13
00:01:02,710 --> 00:01:07,150
mas vou cortá-la de lá e movê-la para o item de refeição e lá, retornar essa

14
00:01:07,150 --> 00:01:12,380
visão aqui, mas de Claro que não terminamos com isso. Por um lado, isso também deve

15
00:01:12,380 --> 00:01:17,390
ser tocável, porque podemos selecionar uma refeição, podemos selecionar uma receita para ser levada

16
00:01:17,390 --> 00:01:21,010
para a tela de detalhes, portanto importarei a opacidade palpável.

17
00:01:21,020 --> 00:01:25,910
Agora, é claro, você poderia novamente fazer essa diferenciação e usar o efeito cascata

18
00:01:25,970 --> 00:01:27,880
com feedback nativo palpável

19
00:01:27,920 --> 00:01:35,270
no Android, se você quisesse, eu irei com opacidade palpável por enquanto e envolverei minha visão aqui com opacidade palpável, assim para

20
00:01:35,420 --> 00:01:44,350
que possamos na verdade, toque nosso item aqui e no onPress, na verdade, eu quero ativar uma função que espero obter em uma propriedade que ainda

21
00:01:44,350 --> 00:01:49,000
não estamos passando para o item de refeição, mas porque ainda não estamos

22
00:01:49,000 --> 00:01:54,460
usando o item de refeição em qualquer lugar, mas que irei no futuro, talvez possamos nomear

23
00:01:54,460 --> 00:02:00,820
isso em select meal ou apenas onSelect, o que você quiser, o nomeei onSelectMeal e espero obter esse suporte

24
00:02:00,820 --> 00:02:06,950
no item de refeição quando o usarmos em jsx. Então essa é a opacidade palpável, aí eu

25
00:02:08,790 --> 00:02:16,050
tenho minha visão com o título e, na verdade, essa visão deve ser um pouco mais complexa do que isso.

26
00:02:16,740 --> 00:02:24,150
Eu quero ter uma visão, uma visão aninhada lá como essa e outra visão abaixo, então quero

27
00:02:24,180 --> 00:02:25,530
ter duas linhas.

28
00:02:25,530 --> 00:02:31,060
Isso será configurado como uma coluna, mas essas duas visualizações aqui serão configuradas como linhas aqui.

29
00:02:31,230 --> 00:02:38,280
A primeira visualização também deve renderizar uma imagem de plano de fundo, para que o título fique na frente dessa

30
00:02:38,310 --> 00:02:39,130
imagem de

31
00:02:39,180 --> 00:02:44,730
plano de fundo, a segunda visualização e a segunda linha aqui devem renderizar alguns detalhes sobre

32
00:02:44,730 --> 00:02:47,270
a receita selecionada, como complexidade e duração.

33
00:02:50,190 --> 00:02:55,530
Então, vamos começar com isso antes de adicionarmos a imagem mais tarde. Em ambas as

34
00:02:55,560 --> 00:03:00,660
visualizações, adicionarei a propriedade style e apontei para a linha de refeição de

35
00:03:03,050 --> 00:03:08,860
estilos ou o que você quiser nomear, porque será uma linha na minha apresentação de refeição

36
00:03:10,030 --> 00:03:18,140
aqui e eu adicionarei a linha da refeição lá em baixo e definiremos a direção flexível aqui para a linha, é claro, porque

37
00:03:18,140 --> 00:03:23,150
essas devem ser linhas de dados. Agora, ao redor do item

38
00:03:23,170 --> 00:03:27,290
geral aqui, envolverei outra visualização na qual desejo configurar um

39
00:03:30,050 --> 00:03:34,850
estilo geral de estilos item de refeição e item de refeição,

40
00:03:34,850 --> 00:03:40,670
que também é configurado aqui na folha de estilo, é claro, e lá quero

41
00:03:40,700 --> 00:03:46,940
dar uma altura a cada refeição de 200, digamos, cada item da lista aqui e

42
00:03:46,940 --> 00:03:55,390
uma largura de 100% para obter a largura total disponível e também talvez uma cor de fundo dessa aparência acinzentada

43
00:03:55,430 --> 00:04:00,570
aqui, podemos ver se queremos manter isso, por enquanto vou Use isso.

44
00:04:00,810 --> 00:04:04,770
Agora podemos usar o item de refeição aqui e ainda

45
00:04:04,770 --> 00:04:14,560
não o terminamos, mas podemos começar a usá-lo aqui na tela de categoria refeições importando-o, é claro, importando-o, importando-o da pasta de componentes e do arquivo

46
00:04:14,560 --> 00:04:25,230
de itens de refeição e depois renderize isso aqui, então retorne o item da refeição aqui assim e, é claro, agora precisamos passar alguns dados, dados como o

47
00:04:25,230 --> 00:04:32,010
título que obtemos do itemData. item. title e o suporte onSelect

48
00:04:32,010 --> 00:04:38,850
que espero obter no item de refeição que, no final, associamos ao suporte onPress da opacidade palpável, onSelectMeal,

49
00:04:38,850 --> 00:04:42,840
que foi o nome que escolhi, também é algo que

50
00:04:42,840 --> 00:04:44,030
precisamos configurar

51
00:04:44,070 --> 00:04:46,820
aqui quando usamos a refeição item e

52
00:04:46,830 --> 00:04:51,330
isso deve apontar para uma função que, por enquanto, não faz nada,

53
00:04:51,330 --> 00:04:55,090
mas que posteriormente carregará a página de detalhes dessa refeição.

54
00:04:55,110 --> 00:05:00,300
Portanto, agora obtemos o título no suporte de título, daí o item de refeição, aqui, quando produzimos o título, fazemos isso com a ajuda

55
00:05:00,300 --> 00:05:01,590
de adereços. título.

56
00:05:01,740 --> 00:05:09,260
Se agora salvarmos isso, poderemos realmente ver algo aqui, então vamos esperar que isso seja recarregado e sim, vemos

57
00:05:09,260 --> 00:05:10,580
nossa refeição aqui

58
00:05:10,580 --> 00:05:16,730
e certamente não muito bonita, mas pelo menos, vemos um pouco mais do que antes.

59
00:05:16,730 --> 00:05:21,620
Agora, o que eu gostaria de ter aqui é um pouco de espaçamento ao redor da lista, mas

60
00:05:21,710 --> 00:05:26,930
dentro do espaçamento, o item da lista deve ter a largura total disponível e não apenas a largura do item

61
00:05:26,930 --> 00:05:28,850
mais largo que atualmente está acontecendo.

62
00:05:29,090 --> 00:05:35,800
E, para isso, podemos acessar o FlatList e adicionar a propriedade style e definir essa largura para 100% para

63
00:05:35,810 --> 00:05:39,470
garantir que o FlatList tenha toda a largura possível.

64
00:05:39,470 --> 00:05:42,020
Com isso, deveríamos procurar o que queremos aqui.

65
00:05:42,290 --> 00:05:44,710
Agora, é claro, os itens das refeições ainda não estão prontos, eles não têm a

66
00:05:44,720 --> 00:05:51,380
aparência que eu quero que eles tenham, mas também chegamos lá lentamente. Agora no MealItem. js, ainda temos algum trabalho

67
00:05:51,380 --> 00:05:53,680
a ser feito, por exemplo, essa

68
00:05:53,690 --> 00:05:59,840
visualização aqui com o título mais tarde também conterá a imagem e, portanto, deve ser muito

69
00:05:59,840 --> 00:06:03,960
maior que a linha abaixo dela, que posteriormente produzirá alguns detalhes.

70
00:06:05,500 --> 00:06:18,310
Portanto, aqui, mesclarei meus estilos de linha de refeição com outro objeto de estilo, portanto, com o estilo configurado em outro objeto da folha de estilo, que nomeei como

71
00:06:18,350 --> 00:06:26,530
cabeçalho de refeição ou o que você quiser, e o mesmo lá em baixo, a propósito, para os

72
00:06:26,530 --> 00:06:29,090
detalhes no final, mesclarei isso com

73
00:06:29,110 --> 00:06:36,920
os detalhes da refeição de estilos, para que combinemos estilos e vamos começar com o cabeçalho da

74
00:06:36,920 --> 00:06:39,470
refeição que podemos configurar aqui.

75
00:06:39,470 --> 00:06:47,090
O cabeçalho da refeição no final conterá a imagem e também o título, e eu quero que

76
00:06:47,410 --> 00:06:49,580
a altura seja de,

77
00:06:49,580 --> 00:06:59,550
digamos, 80% da altura disponível, então isso deve ser muito grande. Os detalhes da refeição automaticamente obterão os 20% restantes, obviamente,

78
00:06:59,550 --> 00:07:07,470
e para ver se isso funciona, vamos mostrar alguns detalhes aqui. Portanto, nessa exibição aqui, nessa linha

79
00:07:07,470 --> 00:07:10,020
abaixo da linha do título,

80
00:07:10,020 --> 00:07:13,420
também quero ter um texto aqui e

81
00:07:13,440 --> 00:07:21,920
ali. produzirá, digamos, props duration e depois m, por minutos, porque m duration será um número que tratamos

82
00:07:21,920 --> 00:07:23,330
como minutos.

83
00:07:23,330 --> 00:07:27,740
Apenas precisamos passar a duração da tela de categoria refeições, é claro, portanto, quando usarmos

84
00:07:27,740 --> 00:07:33,140
o item de refeição, além de passar um título, definiremos o limite de duração, porque agora estamos esperando

85
00:07:33,140 --> 00:07:34,940
isso no item de refeição.

86
00:07:34,940 --> 00:07:40,700
Obtemos isso do itemData. item que é nossa refeição

87
00:07:40,760 --> 00:07:45,630
e lá, teremos uma propriedade duration, porque nossas refeições,

88
00:07:45,800 --> 00:07:50,690
conforme definidas no modelo aqui, têm uma propriedade duration .

89
00:07:54,760 --> 00:07:56,560
Se salvarmos isso,

90
00:07:56,560 --> 00:08:06,850
agora vemos nossa duração lá em baixo e, na verdade, ainda podemos alterar essa altura aqui para até 90%, deve ser maior do que

91
00:08:06,910 --> 00:08:09,420
era aqui, que parece melhor e,

92
00:08:09,430 --> 00:08:10,630
é claro,

93
00:08:10,750 --> 00:08:14,830
você pode experimentar isso também. Na linha de detalhes

94
00:08:14,830 --> 00:08:22,680
da refeição, eu também quero ter um preenchimento horizontal, então, à esquerda e à direita, digamos 10 e

95
00:08:22,690 --> 00:08:32,650
justifique meu conteúdo aqui com espaço entre elas, lembre-se de que é uma linha, então isso será justificado horizontalmente, para que quando tivermos

96
00:08:32,650 --> 00:08:35,690
vários itens, eles serão bem distribuídos lá.

97
00:08:35,740 --> 00:08:45,740
Portanto, temos 20 minutos, vamos produzir mais informações adicionando outro texto e

98
00:08:45,900 --> 00:08:47,030
produzindo

99
00:08:47,030 --> 00:08:53,140
a complexidade. Portanto, aqui apresentarei a complexidade

100
00:08:53,140 --> 00:09:01,950
e, posteriormente, apresentarei a acessibilidade. Agora só precisamos passar esses dados ao criar nosso item de refeição.

101
00:09:01,990 --> 00:09:06,460
Então aqui, além da duração, passamos na

102
00:09:06,460 --> 00:09:16,420
complexidade que chegamos aqui, itemData. item. complexidade e acessibilidade, é claro que é

103
00:09:16,430 --> 00:09:18,530
itemData. item. acessibilidade, assim

104
00:09:18,740 --> 00:09:28,910
e se salvarmos isso e deixarmos que este seja reproduzido novamente, agora vemos essa saída aqui. Ainda não é super bonito e podemos definitivamente

105
00:09:29,000 --> 00:09:37,390
melhorar isso, mas um bom começo. Agora simples e acessível ou, portanto, nossa complexidade e

106
00:09:37,390 --> 00:09:45,000
acessibilidade, isso deve ser um pouco diferente. Sabemos que será texto e, portanto, eu

107
00:09:45,000 --> 00:09:51,680
posso usar algumas funções ou métodos Javascript que temos disponíveis nas strings; simplesmente

108
00:09:51,770 --> 00:09:59,930
usarei o toUppercase para convertê-lo em maiúsculas inteiramente assim e agora isso já deve parecer um

109
00:09:59,930 --> 00:10:06,590
pouco melhor do que antes. Agora você ainda pode ajustar o estilo aqui, eu continuarei com esse estilo aqui

110
00:10:06,620 --> 00:10:09,440
por enquanto e agora vamos adicionar uma imagem de fundo acima.

111
00:10:09,440 --> 00:10:16,370
Portanto, para isso, queríamos uma imagem de plano de fundo por trás do texto do título e, felizmente, o React Native torna

112
00:10:16,370 --> 00:10:23,930
a adição de uma imagem de plano de fundo realmente muito simples. Reagir Navios nativos com um componente interno, o componente

113
00:10:23,990 --> 00:10:29,690
de plano de fundo da imagem que podemos usar para renderizar uma imagem em

114
00:10:29,690 --> 00:10:36,020
segundo plano, como você imagina pelo nome. Você o adiciona ao lado do componente atrás do qual deseja adicioná-lo e o adiciona antes desse

115
00:10:36,020 --> 00:10:43,520
componente. Portanto, aqui eu adiciono o fundo da imagem e o fundo da imagem, como na imagem normal, para definir uma fonte. Aqui, minha fonte é uma imagem da web; portanto, passamos um

116
00:10:43,520 --> 00:10:49,220
objeto; se fosse uma imagem local, você usaria o require e o que aprendeu sobre imagens locais

117
00:10:49,220 --> 00:10:54,380
no início do curso, mas aqui, é uma imagem da web; objeto com um suporte de

118
00:10:54,380 --> 00:11:00,560
URI e lá usamos props image, que é onde espero obter esse URL nesse componente, portanto, é claro que

119
00:11:00,560 --> 00:11:07,370
teremos que garantir que passemos o URL nesse suporte. Também adicionarei alguns

120
00:11:07,370 --> 00:11:15,000
estilos aqui e serão estilos. bgImage que agora vamos adicionar à folha de estilo lá em

121
00:11:15,720 --> 00:11:22,110
baixo, onde você quiser, talvez aqui, realmente não importa. Uma coisa importante aqui, você deve definir a

122
00:11:22,110 --> 00:11:27,060
largura e a altura, porque é uma imagem da Web e eu as

123
00:11:27,060 --> 00:11:36,350
usarei 100% para ambas, porque deve preencher todo o espaço que obtiver. Agora só precisamos garantir que passamos a imagem aqui na categoria categoria refeições, então

124
00:11:36,440 --> 00:11:45,560
além do título, aqui também quero passar no itemData. item. imageUrl é o nome dele, você pode ver isso no modelo

125
00:11:45,560 --> 00:11:51,020
imageUrl, então é isso que estamos passando e passamos para o suporte de imagem, porque é isso que estamos esperando

126
00:11:51,020 --> 00:11:56,960
e o que estamos definindo aqui na refeição item. E se você agora salvar isso e vamos misturar

127
00:11:56,970 --> 00:12:02,910
as coisas e testar isso no Android, demorará um pouco mais para carregar, e é por isso que normalmente uso

128
00:12:03,000 --> 00:12:10,410
o iOS aqui, mas agora, se testarmos, vemos o nosso hambúrguer aqui. O que não vemos

129
00:12:10,410 --> 00:12:19,010
mais é o nosso título. Para mostrar o título novamente, certifique-se de envolver

130
00:12:19,010 --> 00:12:27,480
realmente o fundo da imagem, é assim que você diz ao React Native qual conteúdo deve

131
00:12:27,480 --> 00:12:34,320
estar acima da imagem de fundo. Então agora, com isso, aqui está o nosso título, que não é fácil de ler e vamos consertar isso, mas está lá novamente.

132
00:12:35,480 --> 00:12:41,050
Então, estamos começando com essa receita aqui, agora vamos garantir que o título seja um

133
00:12:41,050 --> 00:12:50,760
pouco mais fácil de ver, atribuindo-lhe um estilo aqui, um título de estilos que agora podemos configurar lá em baixo e eu quero definir uma família

134
00:12:50,850 --> 00:12:52,210
de fontes open

135
00:12:52,220 --> 00:12:55,490
sans bold, faz sentido desde que registramos essa fonte.

136
00:12:55,590 --> 00:12:59,380
Dê um tamanho de fonte que nós aumentamos um pouco, talvez 22, você

137
00:12:59,400 --> 00:13:01,310
pode brincar com isso, é claro.

138
00:13:01,440 --> 00:13:07,380
Dê uma cor branca para facilitar a leitura e também atribua uma cor de fundo, para que possamos sempre

139
00:13:07,380 --> 00:13:10,600
vê-la, mesmo que a imagem de fundo seja branca; nesse

140
00:13:10,620 --> 00:13:16,800
caso, o texto em branco seria difícil de ler, fornecendo essa é uma cor RGBA que é uma cor que possui

141
00:13:16,800 --> 00:13:22,380
transparência embutida, por assim dizer, e é simplesmente uma cor preta que é um pouco transparente e agora

142
00:13:25,490 --> 00:13:28,400
também adiciona um pouco de preenchimento aqui, o preenchimento

143
00:13:28,390 --> 00:13:35,000
vertical de cinco deve ficar bom para que o a caixa colorida de plano de fundo aqui não fica bem nas bordas

144
00:13:35,000 --> 00:13:42,950
do texto que está dentro da caixa e preenchendo na horizontal 12, talvez. Com isso, devemos sempre ver nosso título

145
00:13:42,950 --> 00:13:48,540
e, na verdade, provavelmente podemos aumentar essa transparência aqui,

146
00:13:48,560 --> 00:13:51,790
diminuir a opacidade, sim, isso

147
00:13:51,890 --> 00:13:53,630
parece um

148
00:13:59,550 --> 00:14:06,420
pouco melhor, eu acho, assim. E a única coisa que quero fazer agora é

149
00:14:06,420 --> 00:14:10,250
mover o título para baixo na parte inferior desta imagem

150
00:14:12,450 --> 00:14:23,230
e, portanto, no estilo bgImage que tenho aqui, configurarei o conteúdo justificado para flexionar o final, porque a imagem de fundo age automaticamente como uma caixa flexível, por assim

151
00:14:23,230 --> 00:14:27,970
dizer, como uma visualização, para que possamos justificar nosso conteúdo lá e agora

152
00:14:27,970 --> 00:14:30,400
tenhamos esse título na parte inferior.

153
00:14:30,430 --> 00:14:39,460
Agora também poderíamos centralizar o texto, indo para o título aqui e adicionando o centro de alinhamento de texto e, caso seja muito longo, muito grande,

154
00:14:39,580 --> 00:14:42,210
além de diminuir o tamanho da

155
00:14:42,310 --> 00:14:46,400
fonte, o que farei um pouco para 20, é claro que

156
00:14:46,420 --> 00:14:53,080
você pode vá para o texto aqui em que você produz um título e defina o número de linhas

157
00:14:53,080 --> 00:14:55,870
como 1 e isso garantirá que o texto

158
00:14:55,870 --> 00:15:06,780
seja encurtado automaticamente se for muito grande, como aqui para a salada com tomate cereja. Também vemos um efeito estranho aqui no iOS, onde temos um

159
00:15:06,880 --> 00:15:15,150
plano de fundo extra por trás do texto e não apenas a caixa colorida de plano de fundo aqui.

160
00:15:15,160 --> 00:15:22,880
Isso porque eu apliquei minha cor de plano de fundo e assim por diante diretamente no texto. Para corrigir isso, podemos cortá-lo

161
00:15:22,880 --> 00:15:29,510
do título aqui e configurar apenas a cor e assim por diante. Em vez disso, adicione um contêiner de

162
00:15:29,540 --> 00:15:37,100
título aqui, onde adicionamos essa cor de plano de fundo e assim por diante, envolva esse contêiner em torno de nosso

163
00:15:37,120 --> 00:15:42,580
título; portanto, uma visualização extra que adicionamos aqui e é bastante normal no React Native

164
00:15:42,580 --> 00:15:51,580
aninhar várias visualizações e, nessa exibição, agora podemos adicionar estilo, estilos e contêiner de título e, se salvarmos isso, devemos nos livrar desse comportamento estranho

165
00:15:51,580 --> 00:15:52,860
no iOS; sim,

166
00:15:52,900 --> 00:15:55,590
agora não temos essa caixa extra lá,

167
00:15:55,600 --> 00:16:00,380
apenas temos uma cor de plano de fundo e a mesma no Android.

168
00:16:00,520 --> 00:16:04,270
Então agora isso não parece muito ruim, mas eu não estou totalmente

169
00:16:04,270 --> 00:16:10,480
feliz, eu gostaria de centralizar meus detalhes aqui verticalmente também e dar um pouco mais de espaço, eu acho, e

170
00:16:10,480 --> 00:16:17,560
por isso podemos dar o cabeçalho talvez 85% da altura e dos detalhes da refeição aqui, lembre-se de que nossa direção flexível é

171
00:16:17,560 --> 00:16:23,650
a linha, porque estamos mesclando a linha da refeição e os detalhes da refeição aqui e, portanto, nosso eixo

172
00:16:23,670 --> 00:16:26,080
transversal é de cima para baixo; portanto,

173
00:16:26,080 --> 00:16:30,540
se queremos centralizar verticalmente, isso é o eixo transversal no qual precisamos nos centrar.

174
00:16:30,550 --> 00:16:37,540
Portanto, aqui podemos definir itens de alinhamento que posicionam o eixo transversal para centralizar e

175
00:16:37,540 --> 00:16:43,280
também alterar nossa cor aqui para um pouco de uma cor mais agradável,

176
00:16:43,510 --> 00:16:49,170
esse cinza muito claro, # f5f5f5 pode parecer um pouco melhor, sim,

177
00:16:49,300 --> 00:16:50,800
definitivamente .

178
00:16:50,800 --> 00:16:56,610
Agora, para garantir que realmente centralizemos verticalmente, precisamos apenas ser mais explícitos sobre a

179
00:16:56,650 --> 00:16:58,660
altura que os detalhes

180
00:17:03,480 --> 00:17:09,590
da refeição devem ter; levamos 85% no cabeçalho; portanto, nos detalhes aqui, podemos definir obviamente

181
00:17:09,600 --> 00:17:17,230
uma altura de 15% para descansar, sim, e eu diria que isso parece bastante decente aqui, certamente lista

182
00:17:17,420 --> 00:17:20,620
itens com os quais podemos trabalhar aqui.

183
00:17:20,630 --> 00:17:25,670
Agora, adicionarei um pouco do raio da borda, porque você sabe que eu gosto de raios

184
00:17:25,670 --> 00:17:33,500
da borda, então adicionarei um raio da borda de 10 aqui, para que tenhamos alguns cantos arredondados e, com isso, se você voltar, nós '

185
00:17:33,500 --> 00:17:38,820
já está quase lá, mas você notará que a imagem realmente não respeita o raio da borda.

186
00:17:38,870 --> 00:17:46,780
Agora, para corrigir isso, no item da refeição, basta dizer que o estouro está oculto para que nenhum item filho possa sair desse

187
00:17:46,780 --> 00:17:49,130
espaço ou da forma que estamos construindo

188
00:17:49,130 --> 00:17:49,910
aqui.

189
00:17:53,550 --> 00:17:56,880
E com isso, isso é um começo, algo com o qual podemos trabalhar, agora

190
00:17:56,880 --> 00:18:02,070
é claro que queremos ter certeza de que, quando tocarmos em um item desse tipo, iremos realmente para a página de detalhes.