1
00:00:00,940 --> 00:00:04,120
All of our resize logic is working perfectly in the vertical direction.

2
00:00:04,330 --> 00:00:08,860
I remember we eventually want to have a resize element between our code editor and the browser or the

3
00:00:08,860 --> 00:00:10,270
preview window over here as well.

4
00:00:10,780 --> 00:00:16,309
So it should look like this, something that we can grab onto and drag to resize the code editor.

5
00:00:16,990 --> 00:00:22,050
So we're going to add in another edition or another copy of our sizable component.

6
00:00:22,480 --> 00:00:24,430
We're going to wrap it around the code editor.

7
00:00:24,550 --> 00:00:29,740
So whenever a user starts to drag this thing back and forth, they're going to resize just the code

8
00:00:29,740 --> 00:00:34,810
editor component as they start to increase the size of the code editor and it starts to kind of get

9
00:00:34,810 --> 00:00:35,320
larger.

10
00:00:35,500 --> 00:00:39,640
That's going to naturally push the preview window a little bit more off to the right hand side.

11
00:00:40,330 --> 00:00:44,920
And then as the user starts to shrink the code editor, that is going to allow the preview window to

12
00:00:44,920 --> 00:00:46,450
start to expand towards the left.

13
00:00:47,120 --> 00:00:50,770
That's how we're going to add in some horizontal resize as well.

14
00:00:51,650 --> 00:00:54,650
So to get started, I'm going to go back over to my code editor.

15
00:00:56,170 --> 00:00:59,440
I'm going to find my code cell to file.

16
00:01:00,280 --> 00:01:05,770
Inside of here, I'm going to go down to our code editor component and I'm going to wrap that with another

17
00:01:05,770 --> 00:01:07,810
instance of sizable.

18
00:01:13,020 --> 00:01:18,960
And I'm going to provide a direction up to it of horizontal, because this sizable we wanted to allow

19
00:01:18,960 --> 00:01:21,900
resizing in the horizontal direction, as you'd guess.

20
00:01:23,400 --> 00:01:28,470
If we save this right now and flip back over, well, it definitely kind of breaks a lot of stuff.

21
00:01:28,890 --> 00:01:34,280
That's because we have really only set up one set of props inside of our sizable component.

22
00:01:34,710 --> 00:01:40,200
Remember, inside a very sizable right now, we are really only handling resizing in the vertical direction.

23
00:01:40,420 --> 00:01:45,000
All these props are hard coded, so it doesn't really matter if we pass in a different direction right

24
00:01:45,000 --> 00:01:45,230
now.

25
00:01:45,870 --> 00:01:51,630
So our next big job, we need to take a look at this direction prop and then use that to decide all

26
00:01:51,630 --> 00:01:54,810
the different values that we are providing to a sizable box.

27
00:01:55,460 --> 00:01:57,750
So let's kick off that process in the next video.