Designing dashboard module views

We have prototyped our entire app and now it is time to slowly add in each design element. As we have done throughout the book, we will first do this together and then I will challenge you to do it on your own. Let's first move to HomeDashboardView and work on this view first.

Video player with a grid

We know from our design that our HomeDashboardView has a video player with a grid. We already have the base of this created; we just need to swap out a couple of things to make this work.

Open HomeDashboardView and copy the VStack component out of the topRow variable and paste it into the body variable in VideoModuleView. Now, update previews to the following:

.previewLayout(.fixed(width: 1024, height: 350))

Inside of VideoModuleView(), locate the following Rectangle(), which we just copied over from HomeDashboardView:

Rectangle()
    .cornerRadius(10)
    .frame(width: 578, height: 324)

...