0:00 All right, so let's go ahead and now create this new photo upload 0:03 dialog 0:04 that we can render when we click on the floating action 0:07 button. 0:08 So inside of our components directory 0:11 and in our dashboard folder, let's go ahead and create the new 0:15 photo 0:17 upload.tsx component. Now, inside of 0:21 here, we'll go ahead and 0:23 export default 0:26 photo upload component. And as we've been doing, we'll 0:29 define some props for this component. 0:32 So we'll have the photo upload props, and again, we're trying 0:36 to keep this component dumb and reusable, keep the business logic out of 0:39 here. We'll have the open Boolean, which determines if we actually 0:43 are showing 0:43 it or not. 0:45 Also, we'll have onOpenChange listener because 0:48 this 0:49 dialog can actually emit a close event itself when a 0:53 user hits the escape button or closes off. 0:56 So we need to alert the parent about that event. 0:59 And then finally, on Submit handler, we'll get passed in an 1:02 actual HTML file which includes the 1:06 actual image we're trying to upload, as well as the caption 1:10 for the underlying image. And so we'll pass this to the 1:14 caller, where we can then upload that to our server using a 1:18 file upload endpoint that we will create, as well as our 1:21 tRPC mutation to create our new post. 1:25 All right, so let's go ahead and start off by 1:28 creating our root JSX. So in here, 1:31 we're gonna go ahead and make sure we have the function 1:34 keyword. 1:34 All right, so now to render our upload dialog, 1:37 we're gonna use the Shade Cn 1:38 dialog component, which is a really beautiful dialog component 1:42 that 1:42 works very well. And so we're gonna follow our typical 1:45 process to 1:46 generate this new component. 1:48 We'll go back into Apps Web directory, and we'll use 1:52 pnpm dlx shade cn @latest
The rest of the transcript is for members.
Sign in 