Shadcn Component Library Course for Beginners - यूट्यूब द्विभाषीय उपशीर्षक

Shadcn Component Library Course for Beginners - द्विभाषीय उपशीर्षक

Chad Cien is a unique collection of usable React components designed for modern web development.

In this course, you'll learn how to integrate beautifully designed, accessible, and customizable UI elements into your next JS projects.

Matthew teach you the process of copying and pasting these components.

directly into your code base, allowing for full customization and ownership.

Hey guys, what's up and welcome.

It's Matthew here, the high.

hybrid, the designer and a developer, the of both worlds and the greatest.

This is a series on Shed CN.

Without wasting time, let's just jump straight into it.

Ah, we are going to use Next.js, so we can just come here and click on Next.js.

Obviously, you can create a Next.js app here.

I've already done that.

And then let's install Shed CN.

So we are going to copy this command.

We are going to use npm.

Okay, and then let's go back here.

As you can see, guys, this is my next JS application.

The only files that I hear, it's this app.

Okay, you are not going to have this app and you are not going to have this dashboard because this project is just a

tutorial from my I have used it on my previous tutorial okay so let me just

delete this and then try to create a new one my apologies about that Tamina new So,

you are going to have a template like this without this app and dashboard.

So, as you can see, guys, we are inside this folder, next dashboard, okay, this app.

So, let's paste this NPX chassis and UI.

So, As a beginner, let me just take you through what's going to happen.

Shed CN will create a folder here which is components in small letters.

This is where Shed CN will put all of its components, okay?

It is advisable to always install Shenxian, like at the beginning of your development process, non-install Shenxian later when you are halfway through.

The reason is, you might have your own components folder here, which is a small letter, and Shenxian will come.

Maybe Shenxian might override all the files that you have there.

For instance,

if you have the same naming convention as in that folder,

let's say in the folder components, you've got a pattern and you are installing a Shetty N pattern.

Shetty N will go to your component folder,

it will override the pattern that is there and it will delete it and it will install its own.

So it's very important to install like Shetty N like from this that.

Okay.

So if I can be honest with you, I didn't press Enter here.

So maybe that happens by mistake, but that's not much of a problem.

Okay, let's just quickly answer these.

which part you want to use here, I'm just going to click default, use late enter.

What do you like to use this as variable enter?

And that is it, okay?

As you can see, guys, Shettyn has created this components folder.

And I think also this lib folder with utils more about this later.

So we are done installing Shettyn.

So, we are done with the installation and we are going to get into the first component, which is the accordion.

The best way to go about Shetty N is just to follow exactly what they are telling you here.

And then from then we are going to make some minor tweaks in the UI.

like, there is something that we don't like.

As I've just noticed that there are some things that I don't like about Shetty and UI.

These things are not bad, but a personal preference.

So what is an accordion?

An accordion is a component like this.

It's more like a list that has got a drop down list.

I can say, okay, as you can see, this shows more about And this shows more about this item.

As you can see, guys, it has got some nice animation.

So are going to create our own following this step by step.

This is how the code looks like.

Okay.

So let's see what they are advising us to do.

I've already installed a shared scene.

So the first stage or the first step is to install specifically the accordion.

How do you do that?

You just copy this.

I'm using npm.

I've already have a next JS application running, and it has got some sort of a blank page.

So let's get back to it.

As you can see, this is the next JS application.

Okay.

And I've already installed Shetty and and Shetty and has installed these components folder.

So as you can see, this folder is empty because we don't have any component.

So what we are going to do, we are going to open another 10 minutes.

okay I'm going to split the screen so this is another terminal I'm going to paste

the command and click enter so suppose this accordion component will appear here

inside here okay while it's busy installing let's just go back here and see what is the next step for Okay,

we're done with this installation update the tailwind config.

I don't think this is necessary unless we're facing some issues we will come back and implement this.

Okay, let's check on the usage.

So do you use it?

Okay, so you first encode all of these, okay, and then from there you paste this and then you are done, okay?

So what we are going to do we are going to create our own components,

okay meaning that we're not going to paste these in one file,

okay This is what I mean Okay, as you can see here, we've got UI and Okay, and we've got the accordion.

Cool.

We're not going to de-step that.

We're just going to go to our app and then create a folder.

Let's name this folder Shet Cn.

Okay, just Shet Cn.

And then we're going to create our own components.

Okay.

So what we are going to do here on ShetCN, we are going to create our own accordion.

So the naming, I'm just going to type my accordion, okay?

So that we can separate our own accordion from the ShetCN accordion.

So the first thing that we do, we import all of these, in fact, let's just go back here and type our FCE.

Okay.

As you can see, this is just a React functional component.

If might want to know how I did that, you can just search for this extension and install it.

Okay.

So let's go up here and input all of these, go back to shed CN.

And copy and paste it right here we can even remove this okay and paste this right here okay

and then click save so what we are going to do here we are going to come here okay

first let's let's run this and see how it looks so on that

blank We can go and import my accordion where is my link page here.

So we can just come here and import my accordion

Okay as a self-closing check save and then go back and see how it looks Okay,

as you can see guys, this is our accordion.

My apologies about that, obviously for now it fills the entire area and this is not what we want.

Okay, let's try to look at Shatsy and how this one is.

Okay, as you can see this one, it's a little bit smaller, okay, so let's try to create something

like this,

okay, so we're going to go back here, not in this page, we're going to go back to our accordion component, we're going to minimize this for now, and what we will do

let's create a container here.

Okay, so that this can be inside a container.

Okay, as you can see, this is inside a container and we're going to style this container.

Class name, let's create a width of, let's say a width of 200 pixels.

and let's see go back to as you can see guys now we have controlled this okay

I'm happy with this okay let's just change the title okay let's just type a coded design Okay, and let's also change the description here.

Last time, thank you for subscribing.

Okay, I mean this in a true sense of the web.

Thank you for subscribing, okay?

now let's go back and check first let me save go back and check as you can see guys thank you for

subscribing i'm happy with this and then what if maybe we want to add let's say one more okay let's see So,

the has got,

it's like a compound components,

okay, meaning that we've got the parent and we've got the children and we've got some other children, nice design, okay.

So what we want to do, let's look at the children, okay, at the components, okay, at the inner components, let's say.

We've got an accordion item.

Okay, this is an accordion item.

So this is how Shetty and has been designed.

Okay, it has got some meaningful components.

So you can see here, okay, we can just copy this whole item.

and paste it here because it's an item.

We want something that is inside a trigger or something.

We want the whole item.

Okay, so you can give some values to your item.

As you can see here is item one.

Let's just say this is item two.

Okay, so I've got another UI channel where I teach Figma which is coded UI.

Okay, like this if you might want to learn then you can visit that channel.

So just type here lnfigma from Matthew okay and then let's click save let's go back here as you can see guys

okay this is what we have exactly what we want to

do we are done with the accordion now we want to check the outlet okay so this is

the outlet to be honest when I

I was like what is this and I was hoping that maybe when I'm clicking it's going to alert something or show something or something will pop.

I think I have mistaken this with the alert dialog, this one.

So this one doesn't do that.

So you can see it's just a plain box outline with a message.

It looks like here.

here, you can also have some variation, okay, or more or less like a variant, you can have like a red one, okay.

So since this is a very simple component, I have decided to some sort of give you more knowledge about how can it be used.

And I'm also going to throw a little bit of next JS,

because if you can implement this as it is, we will just install copy and paste code and then that is it, okay.

So let's get into it, okay.

Let's first copy this and add the outlet, okay.

As you can see here, we've got our next JS application, so we are going to add the outlet, okay.

We're going to add the Allet, then it's supposed to be added here, okay, as you can see, guys, here it is, okay.

And then what we are going to do, we are going to create our own Allet.

Amou is our folder, our folder sheds in, as you can see, the first one is my Aquadion.

So let's create my Allet as a file.

Okay, my alert.tsx.

As usual, we are going to use RFCE just to create a normal react functional component.

We're going to go back to sheet C.

end and input everything that we are supposed to import so that we can use this alert as you can see guys.

And then what we're going to do, we are going to copy this code as it is.

Maybe we can just copy this one, the one with a variant destructive as you can see, let's just copy this one.

Okay, maybe we can even copy the one that we've been given and change the, what can I say, and change the variant.

For instance here, let's see, do we have a variant?

Maybe we'll add a variant here and it's going to be descriptive.

Okay, so my apologies about that.

Let's go back here.

This is our let's copy this as they are telling us to do okay terminal is not defined.

Let's see what mistake have I done okay I'll let I let I let and then our terminal probably let's see do we have to install any thing.

we create this let's see okay terminal okay what is this component let's go

back here so the first approach to is to press control and press space to see.

Okay, as you can see this is an icon.

Okay, so let's just click here so that we can import it.

As you can see guys now everything works well.

We can click save here.

So what we are going to do, we want to display this on our main page.

So, let's go and display this, my let, okay, and then it says self-closing tag, let's click

save and go back and let's check here, okay, suppose it shows up here.

Okay, as you can see it's sort of fresh and then here is the let, okay, as you can see

guys, obviously the alert is too big, okay, like it's spreading across the screen.

What we can do, okay, what we can do, we can surround the alert with something like this, okay, as you can see.

guys maybe we can make our lives easier and don't ask around these in all

of these div okay in all of these components what we can do we can

surround these like all of them okay I hope you do get what we are doing here we are trying to call all of these,

so meaning that if we click save,

as you can see now we have controlled the outlets,

okay, including the including the quadrillion okay I'm happy with this so what we need to do now let's

go let's say we want to change the icon okay let's go to Lucid react okay

Lucid icon let's search for warning my apologies about that let's search

for warning and then we're going to copy this and then we're going to change it here okay Welcome to change this.

Let's say, okay, as you can see.

So let's just copy this and replace this terminal and delete this, okay.

And then let's import it.

So what I'm going to do, I'm going to press control.

then I input this.

So the other thing that I'm going to do, I'm just going to, okay guys, I'm back.

My apologies about that.

There was a sudden disturbance so I have to quickly pause the video.

So I hope I am going to continue from where I have left.

So let's just click save so that I can see where we are.

are in terms of the project.

We have managed to change the icon and I was about to make this content small.

Okay, that's what I was about to do before the disappearance.

Okay.

so as you can see guys that's about it so let's just come here on the alert and

let's type a variant let's see suppose here I get an IntelliSense okay something

like this so that you can show us the different types of options I think this

is because of TypeScript okay so as you can see guys this is

variant and I let okay so as I've told you that this is more like a simple copy and

paste kind of a code so as a bonus I'm just going to teach you are something on

next JS or maybe how this can be used in most platform or in most

applications like I think even TikTok YouTube and I haven't seen it on WhatsApp

you open the application let's just make an example with with what okay let's just go here okay when

you open the application okay the company itself wants to send some messages to you okay so usually

when you open your dashboard there will be a message here okay more like an outlet like

this one guys okay more like something like this maybe telling you that your account is not up to

date or maybe they are telling you that we have changed our terms and conditions so that is their own way

of communicating directly to you depending on certain circumstances so this is what I'm going to show you as an extra bonus.

So we are going to do based on the parameters on the URL parameters.

Let's say we were What can we say?

We were a banking company, so it's important that your account money, the that you have, it needs not to be zero, okay?

So if it's zero,

that means you don't have money on your account,

we need to show some sort of an outlet to tell you that please top up your account, okay?

Your balances too low, but we are going to use such parameters or ES queries.

okay, the parameters from this URL.

So, this is just the in added next-js bonus, okay.

So, this is how it works.

Let's say we are going to have a parameter which is a balance, okay, something like this, a balance, equal to zero.

If balance is equal to zero, when you visit this website with balance equal to zero, it needs to show you this warning.

But if your balance, it's more than that or there is no query parameter.

then it's not going to show this I hope you do get what I'm trying to say and

I also hope it's helping you to learn how to use things okay so what we are going

to do now let's go

Where we are let's come here on this page must we do that is let's just do that on the main page Okay,

first of all with next JS.

Let's make this a client component to not a server side component So how are you going to do that?

You just type here use client and click save and then Here,

let's make sure that we stick to our react best practices our components must start with capital letters and I'm happy with that.

And then with next JS we are going to use we are going to use a hook which is,

I think it's used such parameters, okay.

So let's try that, let's say const, caram, caram is equal to use.

such parameters,

okay, or such parameters, okay, this is a hook, okay, and then from then I'm not a big fan of memorizing code, okay, I make use

of TypeScript and also the program itself to help me understand what's going on in a particular function or hook.

So what I'm going to do here,

I'm just going to type this params as it is,

this one, okay, I'm just going to type dot to see what do I get in there, what are the options, okay.

So let's check here get, okay, and then let's get balance because the query is going to be balanced.

and then from there, let's just alert this, okay.

let's just let this balance okay let's just let this balance okay so let's

go back here okay as you can see guys we don't have balanced so this is our

letting now okay as you can see it's a letting now now let's just click on to

here now we've got balance of five so let's see As you can see guys,

this is giving us the balance, okay, as you can see, so we are winning, we are managing to get this query parameter, okay.

So what we are going to do based on this query parameter, we need to make some decision, okay.

So let's just type here const balance equal to, let's copy this as it is.

Okay, let's remove this alert and then.

let's put that five inside here,

okay, and then let's come here to the outlet, okay, we are going to render the outlet conditionally, so we need to open a block

of code and then move this outlet to here.

and then what we are going to do is this balance true we are going to use a

tenor operator so we are asking is it true if it's true meaning that is not null

okay yeah let's say if it's not null then let's I'll let this if it's not

let's click this if it's not let's just alert an empty string as you can see

guys okay so what this go this code is going to do it's going to check do we

have the balance as you can see for now we have it so we are displaying this

alert but if we don't have it here okay these are this are

So obviously even though I didn't check if your balance is zero or it's not zero

I hope you do get what we are trying to do here.

In case you really really want to check if the balance is zero You can just come here and change your condition.

For instance if balance it's um Let's say balance is equal to zero.

Okay May I believe about that if balanced cannot balance okay,

sorry, okay, this is a We need to do this

why this comparison

because the type of string and

Okay cool

Okay

obviously for now that is a string okay so we are asking is this balance 0 which

is equal to 0 as a string okay so let's just quickly check here guys before we close Okay,

as you can see guys,

it's not zero,

okay, but once you've got a balance of zero, then we can show the message here, then let's just customize our message so that it can make sense.

So let's just go to alert and okay, this is a bank balance, okay, let's just type bank balance.

okay and then our message will be bank balance okay I am what can I say cannot be zero okay

cannot be zero and that's about it and then let's check here okay if your bank balance is zero

it's going to tell us bank balance cannot be zero if you've got money in your own account,

then that is not much of a problem.

So, let's just click this, okay, as you can see now bank balance is not zero.

So don't show this message Now we are on the alert dialog.

Okay, let's just check what an alert dialog is.

Okay, as you can see guys, this is an alert dialog.

Very simple, right?

You just a click and something pop up.

Obviously, this is a simple tutorial.

We can just follow this copy and paste and then we are done and it will show up.

But I don't think that will give you a more value how to use it.

So at coded design we are going to take it a step further.

So how are we going to do that?

What we are going to do?

We going to design this component in such a way that it becomes reusable and something of so that we

can it and contribute on creating a clean and scalable code.

For instance,

instead of this becoming a modal dialogue that you can use like this or an outlet that you can use like this,

what we are going to do, we are going to make this name dynamic.

this content dynamic these buttons for now we are going to leave them as they are so

what does that mean this means that whenever you want to use this okay you

can just use the same code but just change these props and change this

content okay so without wasting time let's just jump straight into it what's the

next step from here We just need to follow exactly what shed CN is telling us, okay?

We just copy this on MPM and then we go to our terminal and then we paste this,

I don't know why it's like this, but let's press enter and see.

And then this is supposed to appear on our list of shed CN UI components, okay?

shared say, nui component somewhere here, okay, it's going to be an let dialogue box.

And then in the meantime, let's just copy whatever that we have to copy.

So as you can see guys, the next step is to copy this.

So we have to create our own,

what can I say our own let dialog okay so this is our folder for our own

conning so we just type my okay my let dialog okay as you can see guys to

TSX and then we are going to use the snippet our FCE Okay,

and then we are going to import everything that sheds in is asking us to import as you can see guys We can just click save and then what we are going to do

We are going to go back and we are going to copy this code as it is as you can

see This is a bit of a heavy code, okay?

And then what we want to do, we want to copy this and let's just paste it maybe here as it is, okay?

Okay, as you can see, guys, cool beans, everything work.

So if we were just like beginners, we're going to take this as it is change here and create whatever that we want.

What if maybe you want to create another component similar to this one,

we were going to create a new component, copy and paste all of this code, then change this.

This is what we are going to change and do it differently.

But before that, let's just import the these components in our main page and see how it looks like.

Okay, as you can see, don't mind about this.

I'm just rendering this conditionally, okay, so let's just go here.

import this as a self-glosing tag and then we need to I'm going to

press control on Windows and space and then I can import this and then click save

let's go back and check what's there guys okay as you can see here is open

when we click here this pops up okay as you can see what we can do from here now we

can go back to my alert dialog and then we can type here coded design okay and then when you click here Let's say,

are you, okay, are you sure you want to subscribe, okay?

So, yes Lee, I'm hoping that you answer to this question, it's 100% or absolutely, okay, so are you sure?

you want to subscribe.

Okay, let's just go back and see how it looks like the now correct design is an alert and then I show you want to subscribe.

Okay, click okay and it disappears.

Okay, so if we want we can just type here I have already subscribed, hoping that you have already subscribed.

as you can see guys so if we want we might stick to this whenever we want to create a new one we can

always copy this code but this is not how we want to do things we need to make this some sort of a

reusable component so what we can do we can receive some props here remember we're using type

stripped so we can just say this is a title we can just make small letters for simplicity okay we're

going to receive a title and a content okay Now we need to type these.

Okay.

So in terms of the title, it's to be a string that's guaranteed.

But in terms of the content guys,

let's not make it a string,

because as much as here,

it looks like this is a string,

we are going to have, sorry, I'm Okay, as much as it looks like this content, okay, it's going to always be a string, okay?

It might be something else, okay?

You might want to put a form here or a button, okay?

I'm going to show you that later, okay?

So what we are going to do instead of putting a string here, okay?

Okay, we are going to put this alert, okay, so I'm going to show you that flexibility.

So let's make this content, let's make this content a react dot a react node, okay, so that it can accommodate a lot of things.

Okay, as you can see, now if we want, we can pass a string here.

If we want also, we can pass another component.

So let's just quickly test these guys.

Let's take this title and change this correct design and open some block of code.

And then we put the title here.

And then Let's copy the content, place the content here and then obviously TypeScript is telling us that we didn't pass the props here.

Now the props here in terms of title is going to be coded.

UI, okay?

If you might be asking yourself what is coded UI coded UI, it's my other design channel where I teach people how to use Figma.

I will suggest that you try them the channel because Figma is a very important skill more especially if you are a beginner.

You are going to work in a company that wants to save money so it maybe they don't have funds for paying a designer and a developer.

If you come and say Matthew has taught me both of the skill I am able to work on Figma and become

a developer as well.

Maybe might be preferable and you might lend a job.

So in terms of the content,

And for now let us type let us Matthew okay Matthew and then let us go back and see

now as you can see guys this is dynamic this is this is Matthew and I have already subscribed.

Is what I route there?

Let's just double check guys.

I think I'm missing something.

On let, is this alet?

A lot of things are going wrong here.

Let's first fix that.

Okay, my alet dialog.

Okay, cool.

I'll not my alert my alert dialog okay let's change this first okay number two

let's see I've got a title and I have put a title on trigger this is a problem okay let's just go back here Okay,

the trigger must be called a design.

Okay, I Think the title it's supposed to be here my mistake guys, okay

The title is supposed to be here and the content is Supposed to be here on I have already subscribed.

Okay okay cool now let's see I received this I received this let's check here what's

going on what is this guy complaining about my aleta log is not defined obviously

let's import it okay let's see check here As you can see here, we are not importing the Allet dialog box.

Let's check here, guys.

Okay, let's import it again.

It's not defined.

Okay, cool.

Obviously, that's my mistake.

Let's go back to my Allet dialog box.

My apologies about this, guys.

Okay.

As you can see,

this is still not what we are looking

now it's my alert okay let's export it as my alert okay and then let's go back

here and check press control and press space now we've got my alert dialog box

let's go back and check Click here as you can see now.

We've got coded UI and we've got a This is interesting.

Okay, so meaning that now Let's say now we want

another Component okay that will do the same thing But for coded design okay as you can see now the is starting to be reusable,

okay.

Just like that, now we've got another trigger which has got coded with the wrong spelling, coded design and reusable, okay.

as you can see guys so that means we are using the code okay now as you can see

this is called a design this is coded UI but the trigger is the same okay

meaning that we also need to put a trigger okay we need to supply a trigger okay

so let's see what we can do where is our main page that means here we need to

supply a trigger as well cool let's just go back here and type trigger.

Okay, let's just copy this content copy and paste because trigger is going to be the same type as that one.

Okay, let's just change this to trigger.

Okay, as you can see now we can take this trigger and substitute it with this one.

Okay, that means here we must put a trigger.

Okay, now let's say the trigger will be the first one it's coded ui

And the second one, it's called a design, or we can say if a way is that design the wrong spelling.

right as you can see guys we've got coded UI and we've got coded design okay

coded design as you can see now now that we've got this flexibility check here guys We can not only pass strings here, these strings.

We can also pass another components.

This is how flexible this is.

So let's make an experiment on that.

On the other one, let's pass the accordion on coded what?

On coded UI, let's pass a trigger.

No, no, the content.

Okay.

The content of coded UI must be an accordion.

Okay.

No, no, no.

This is title, my apology.

is okay the content of coded UI must be an accordion and the content of coded

design must be an alert okay must be an alert let's come back here let's click save and let's go back and see.

Okay, as you can see guys, we just have an accordion.

So I think this is the best way in which you can think about shed CN and also making like the most out of our shed CN.

We are done with an OLED dialog box.

Now we are getting into the aspect ratio.

Let me be honest guys, I don't have more information.

Necticality of applying this,

okay, but I am just thinking if you are creating a video application let's say since the aspect ratio is more like popular in

videos 16 by 9 in 1920 and all those things you might use it let's say there

is a certain video that you need to display but it must have a certain aspect ratio maybe even in pictures,

okay, but since this is going to be a very simple photo

meaning that we're just going to copy and paste what Shetty and is telling us I am going

to Fix something in next JS and error that we are going to okay

so instead of collecting everything fixing the error without even showing you how do you go about it?

I'm just going to fix the error when I get the hoping that I want as an added bonus or added value to this simple tutorial.

If I can just keep it like this it's just going to be simple only copy and paste.

So for the losing time let's just get into it.

My apologies about that.

So I'm just going to copy this.

Okay, as an NPM, I've got already a react, sorry, next JS application going on or running.

So I'm just going to press enter to install this component.

And then from then, as you can see, this is our project.

Okay, we've got an accordion, we've got an alert, and we've got an alert dialog box.

It's highly reusable.

If you have not watched it, please check the playlist to watch it.

Now, we are creating the aspect ratio, okay?

I hope it's done installing the aspect ratio.

So let's just go to Shed CN and check how to implement it.

As you can.

importing image from next, this will give us some issues and I will show you how to fix them, okay?

So let's copy this and then what we're going to do in our library of component, we are adding another one.

which is my aspect,

okay, my aspect ratio dot TSX, okay, and then we are going to type the reactor snippet RFCE, and then we are going to import the aspect ratio.

And then what we are going to do,

we are going to use it, let's just click here, let's just copy all of this and just paste it here.

Okay, just like that, we've got the aspect ratio working, okay, and then what we want to do, we want to go and look for an image, Okay.

I meant Trevor Noah, but I can even take this guy's picture.

It's a transmesh.

I really, it doesn't really have to be Trevor Noah.

Okay, let's just copy this image.

copy the URL image address.

This is what I want to copy.

So I'm going to page this here, okay, as you can see guys, okay.

So I'm just thinking the other possibility that we might use an aspect ratio.

I'm not sure, but let's just quickly check on Drupal guys, okay.

The reason why I'm doing this, I like to be pragmatic, okay, to test the validity of ideas by their practical use.

I don't like to learn something that I don't really know how to use it.

So that's why I'm doing these guys, okay?

So let's say we are having images that needs to be like this.

Let's look at when we ask on the responsiveness, okay?

Let's see what happens on these in terms of responsiveness, okay?

Maybe we might want these to keep a certain aspect ratio, this image, I'm not sure, okay?

I'm thinking that that image ratio component can also help us on responsive design, okay?

But please guys do your own research so that you can be more knowledgeable, okay?

Okay, let's continue guys.

We've got an aspect ratio.

Let's just make sure that we have saved everything.

Okay, and also we need to take this aspect ratio, let me just remove this, this aspect

ratio to our main page, okay, so that it can be displayed there.

Okay, so, and let's put it here as a self-glosing.

and I'm going to click here and I'm going to press control space so that we can import it.

Okay, let's see if we are not going to have an error from next JS, of course we have an error from next JS.

It doesn't give us a link to go to.

Okay, usually it does that as a network to okay.

Let's see, it's missing the required.

Oh, okay, my apologies about that, guys.

It looks like I'm ahead of myself.

My apologies about that.

Okay, this is not the era that I'm talking about.

This is an era, but not the one that I'm talking about.

Okay, this is asking us for a width.

Okay, so let's just go to our image.

My apologies about that.

Okay.

Let's go here.

Okay.

Let's go here.

So next day as once a width here, let's make it for 50.

I about that.

Let's just make it for 50.

with, this is not tailwind, so this has to be the width, okay, as you can see guys, let's

make this, this for 15, okay, so this was the first error that we had, okay, let's see.

Now what is it saying, it's missing the height, okay cool.

I'm not sure if we put the width and height here, isn't that nullifying the existence of this aspect ratio.

But for now,

let's just do what next year is one,

we will see on the physical appearance of the image if there is something that we are missing.

Okay, if the height will be on 450, let's make it 200.

Okay, let's see.

Okay, and we're it SRC probe from blah blah blah.

Okay, this is the error that I was talking about guys.

Okay.

The one where we need the host name.

Okay.

Cool.

So you can just copy this and paste on Google.

I next JS will be one of the options as a solution.

Okay.

Let's see.

I think suppose there's a next JS link here, but if you don't have it, don't mind, guys.

I think next JS, they also give us a link, okay, they give us a link to the solution.

So you will just go here, let's see, possible ways to fix this, okay.

On your next JS config.js,

maybe by the This is what we have to do,

okay, on the export module we need to put these images, remote patterns, and then we need to put these as it is instead, here we just need

to put our domain, okay.

so before we do that let's go to the next JS config file okay where is it guys you can also help me

I don't see it here is it on next JS.config okay it's a minified version we don't have the other one cool same.

And then here we've got our next config and we've got these are calibrations.

So let's see, does this code looks like this one?

Okay, here we've got our module dot export.

And there we don't have, okay, let's check, as you can see, okay, here we don't have.

So what we are going to do, let's just apply our own mind, okay, let's just What can we do?

What we do?

First, let's just copy this as it is.

Okay.

Let's just copy this as it is.

Next config.

Okay.

Let's try this.

Let's see if it's not going to complain.

Okay.

It's not complaining.

I'm happy with that.

Okay.

I was about to put it inside this config.

Okay.

But let's leave it like that.

It looks like it's going to work.

And then what we want to do, we want to know where are we getting the image?

Okay.

Expect What's the domain of that image?

I think that era can highlight to us the domain specifically, okay.

Let's see.

Envalid SSProb, blah, blah, blah, blah, blah.

Okay, next image, host name.

K here is the host name, okay, that it doesn't recognize.

So can just copy this as it is to make our life easier.

Okay, and then we need to tell next JS that on the config.

Okay, we are having this domain or this host name.

Okay, I don't think we need the path name.

I don't think we need the quote, okay?

We don't need those ones.

So telling NestJS that we are going to fetch the images from this domain.

If might want to prefetch them and cache them and crop and Um,

what can I say compress them so that they can be lightweight for better user experience, you can go on and do that.

So we are done with this, let's just check here and see is next day as still complaining.

Okay.

And remember guys, um, you must fall in love with errors.

Okay.

When you see errors, don't be afraid, don't, what can you say, don't be discouraged.

Okay.

It looks like our server is not running.

I I I don't.

Let me just type create here, and then npm run dev, OK?

Maybe server is stopped after noticing that we have changed the config file, OK?

Let's see.

OK.

Let's see if it like we're having an error here, guys.

OK?

that's what I didn't just remember.

I was like, I think we can put this inside this config instead, okay?

I think that's an error.

That's the reason why we are having this.

Let's check again, guys, okay?

NPM run dev, let's be observant this time.

As you can see, there's an error.

Okay, so let's do this.

So here, this is our own, what can I say?

A feed link, okay?

I like to feed it a lot.

Bapapapapap, token, expected.

Module.export.

Okay, so let's just do this guys, okay?

Now let's just do this.

Let's just do this.

This is the config.

Okay.

So if you might ask me, Matthew, do you know what you are doing?

To be honest, I'm not sure.

I don't know what I'm doing.

So Matthew, why are you doing this?

I like to test things, guys.

Okay, I like to test them.

things and see how they go.

So obviously,

if we are not winning here,

we just going to go to next.js documentation and look in details and copy and paste code exactly as it is.

So let's wait for it to finish and see.

As you can see guys,

it's reloading okay and that's about it guys there is nothing much to this tutorial it's not

that heavy okay it's just a it's just a what what can i say

and aspect ratio and that's it so let's go back here to see okay as you can see

guys it looks like everything it's working our own fit link has worked but

remember I said if we are able to give this a width and height okay isn't that

nullifying

respect ratio for instance okay and aspect ratio it's some sort of a setting

width and height let me just show you guys okay okay aspect ratio okay so I'm

going to search for

images images so an aspect ratio is more like a setting with if the aspect ratio is

16 by 9 it's supposed to almost look like this okay as you can see guys okay so

now here okay let's see what do I want to be.

So here we've got an aspect ratio, let's see, let's see, we've got an aspect ratio of 16 by 9, as mentioned here.

But it looks like this shape, as you can see guys, at I was going to be convinced that the aspect ratio has worked, okay.

So, what might have happened here, okay.

Because of we have put the width and height here, okay, I think it has nullified this, okay.

So, meaning that I'm trying to say it properties, they are mutually exclusive.

Okay, they cannot exist both of them at the same time.

If you put your own width and height, you are trying to say you don't need the aspect ratio.

If you put the aspect ratio, suppose you don't need the width and height.

So let's also dive deep into our own fiddling way.

Okay, why am I showing you showing you the fiddling approach to things?

Number one, I'm not a guru.

I'm just exactly like you.

Number trust your own mind.

Okay.

At least don't just jump to Google.

Just don't decade go.

Okay.

So I'm going to delete this.

Okay.

And then save it.

Let's see.

Is it giving us any errors or what?

It looks like there is some sort of an error here,

but let's go back here and see, is telling us that this is missing the width and height, okay.

So is shed sea and what can I say?

I don't want to say is it fooling us okay but what's going on here why this is not working

okay let's go back and see do we have or everything that these ones are surrounded object

check cover okay so there was a A property of an image that doesn't really need the width and height, okay?

I forgot about it guys,

I'm going to be honest with you, but I will find it, I will find a way to find it, okay?

I think it was feel, okay, but now I don't know what I must put inside.

I hope this will give me some possibilities.

Okay.

Oh, okay.

It's possible that you cannot assign a property here and its works.

Okay.

So what field does when you want your image to be controlled by the parent container?

Okay.

Okay, you are saying that this image needs not to define its width and height, okay?

Exactly as it did here.

It must depend on its container for the width and height.

So let's say you guys and see, can't this help us to solve the problem?

100%

we have just solved what sheds the errors or I'm not sure if this is a park or what I'm not sure Okay,

but for us it didn't work and we have to do something else in order for it to work Which is we have to put this field here,

okay?

So, as you can see, guys, you must always apply your own mind first and what can I say?

Be a fan of fit link, okay?

Fit link helps a lot, okay?

So, as you can see, guys, now this is the aspect ratio as we want.

So, let's go to the internet.

Let's try it.

this knowledge with shared Cn, okay?

So, let's see if we can have a 3 by 2 aspect ratio.

Are we going to get a shape like this or let's say if we have 1 by 1, are we going to get a square?

Let's test it.

that okay here we are just using our own knowledge to see if is this working.

Let's go back here as you can see guys okay it's working okay it's working so this aspect ratio is working then who controls the width

I think now this width is starting to make sense.

Let's make this width 200, okay?

Let's see even see.

As you can see guys, now this width is 200, okay?

And now we are doing the avatar.

And avatar is just, a cycle with an image which is usually a user profile and that's about it.

So let's quickly install the avatar using NPM.

I got a next JS application here.

So I'm just going to install this.

And then as it's installing,

it will show up on Shetty and component UI here,

okay, after showing up here, we are going to create, as you can see here is it, we are going to create our own other.

here on this folder,

okay, components, I apologize about that, where is my shed CN, okay, this one, okay, these are my own shed CN components, okay, so let's just type here my avatar, okay, .tsx,

all right,

and then press enter, okay, and then let's go back to the avatar and see, Okay, so after that, we just need to import these.

Okay, so here we're going to press RFCE.

Okay, react functional component.

And inside here, we can my apologies about that.

This is totally wrong.

Okay, we need to first input everything here and go back and copy this quote here.

and then from there paste it here as you can see guys this is our avatar and then we need to take

this component and display it on our main page as you can see this is the aspect ratio so we are going to display.

And then on Windows, I'm just going to press Ctrl on my keyboard and press Space so that I can import the avatar.

And then from then,

let's go to our main page and see, as you can see, guys, okay, this is the avatar, okay, this is the avatar.

And what we can do,

we can go to the aspect ratio and just use the same image,

the reason why we are going to use this image is simply because the URL for that image, okay.

has already been added or to let's say two sheds,

sorry, to next JS, my apologies guys, okay, this URL has already been added to next JS.

So next JS is not going to ask us a lot of things instead of taking an image from a different website.

So instead of this, let's put our own image.

Okay, as you can see, this is our own image.

Okay, I want you to observe what's going on here.

Let's say empty.

Okay, this is more like a fallback.

Maybe in case this image is still loading or maybe it's null, I think, then it will use this.

And that's about it guys, let's go back here and test.

As you can see guys, okay, let's put the entire, as you can see, it shows empty and then it shows then empty.

Let's say, as an added bonus, you might want this to be a little bit bigger.

The first thing that we need to do, let's check this avatar.

Does it have a prop of size, okay?

Does it have a prop of size?

It looks like there is no prop of size.

So let's see do we have any class name that we can put here it looks like we have so let's just check the width to be 20 and the height to be 20 let's see

what will happen and then I'm just trying to show you how you can change the width.

Okay, as you can see, guys, you can also change the width and height.

Guys, I'm not going to make this tutorial longer unnecessarily.

That's about it.

We are done with an avatar.

It was a very nice shot and sweet one.

I think also the badge is going to be a very quick, nice and straight to the point.

So let me just give you a context first because some components you might see them,

but you don't really have an idea as to where can you use it.

Okay.

And apologize about that.

So let me just open a new tap here and type shed CN.

Recently, I'm creating a real life application for a client, and I am making use of

10 stack table obviously from sheds,

none of them from sheds and this is wrong,

10 stack table is from 10 stack query but sheds and has got their own version of it,

okay, it uses 10 stack table behind the scene but obviously you know sheds and has got some beautiful components.

a beautiful architecture.

So, as I'm using the table, okay, I realize that I need a badge.

My apologies about this.

Let's go to example.

I'm looking for a 10-stack table here.

Where can I get it?

Not The I think it's here.

Okay, so as I'm creating this table, I'm realizing that in terms of let's say statuses, okay,

I need to have some badges here to quickly indicate maybe if this is inactive.

Okay, so a badge is nothing much like just like let's say a rounded button, okay, that you don't

But it just shows you in terms of colors, the status, okay?

So I needed a quick way of showing different statuses and I have used a shared C and badge tool to do that.

So I was just giving you an idea of when can you use a badge because

It looks so simple and you might miss the essence of it, okay?

So maybe it might be something like this with a different color and it's useful guys, okay?

My apologies about that.

So they are use case scenarios.

So let's get back to the topic at hand as you can see here is an example of a page Let's see what other examples do they have?

as you can see this is a different one this is an outline one and this is a

destructive one okay so let's just jump straight into it so what we are going

to do we are going to install it first copy this and go to Shet Cn okay let's

see what do I want to do okay here the code is right running and here the code is not running.

So let me install just paste that guys now.

Okay, and then the badge is going to install.

So first, the badge is going to appear under Shetzi and UI's components, okay?

Somewhere here, first.

Okay, as you can see here, it is.

So we are not going to use it from there.

What we usually do, we are creating our own UI library as Shetzi and all these advices, okay?

I apologize about that.

So what we're going to do, we're going to go here.

Let's just check some things.

my apologies about that.

I'm done copying the badge.

Okay.

Okay, let's first create our own component.

Let's see.

Okay, let's say this is my Okay, this is my badge.tsx.

Okay, and that's about it.

And what I want to copy here, I want to copy this.

Okay, I don't know what's going on with my throat guys.

I'm a polyester about that.

RFCE.

Okay, just to create a component and I need to import that badge.

Okay, as you can see, so how to use it.

simple guys, just like this, copy, and then from then let me move everything here and paste, okay, and that's it.

And then what else do I want to do?

I want to use my badge, okay?

I want to use my badge on this page, okay?

So as you can see,

okay I can use my badge here on my windows I'm just going to press control and

press space so that I can import my badge and then from then I will save come back here

let's see as we can see guys here is my Okay, so let's see what can we do with the page.

Let's go back where?

Let's go back to the actual page, my police about that.

Okay, variant outline, let's see what are other options.

Okay, equal, and then there is a destructive, let's see how destructive looks.

as you can see guys okay and nice page there which is a destructive one I think

that's all okay let's say this is let's say inactive let's say this is an inactive component or a row Not,

can I say a user, an inactive user, okay.

So as you can see guys,

so an edit bonus, I think what we can do here, let's just make this component a user, okay, I apologize about that.

so how can we make this component reusable we just need to pass props okay let me save here

and save here so go back to my badge so what we need to do here we need to pass props okay um

I apologize about that okay so we need to pass props let's say we've got title Okay,

and what else Then we're going to pass title and this is going to be the title.

Okay, can we have a class here?

Yes, we can have a class name here.

Okay, so what we can do as well We can have a class name here

Okay for customizing the the bridge Um, what about this variant, okay?

Why don't I take this variant?

What about this variant?

Okay, let's see what we can do, okay?

Let's also accept a variant, okay?

Let's also accept a variant and let's just copy these as they are,

okay, because we want to, what can I say, to type those, okay, using TypeScript.

The title is going to be a string, okay.

The title is going to be a string.

We are done with it.

The name is going to be a string.

The class name is going to be a string.

And the variant, okay, one can make it a string, but that won't be the best way to go about it.

So what we need to do, we need to tell TypeScript.A It's a combination of these.

So let's copy these as they are from here.

In fact, let's not go even to null and undefined.

I don't think we have to go there.

Let's just copy these, okay?

I will explain now what these are.

okay let's paste these like this okay so this means okay variant this means the

variant can be default it can be secondary it can be destructive it can

be outlined okay

it cannot be something else you cannot come here and type variant blue code or

red or whatever okay that's what this means okay we're copying it exactly from

here okay let's just fix the spelling mistake okay as you can see we're done

guys so let's just quickly our substitute here okay put your title here and then the class name will go here.

All the class name will go here.

And then the variant, the variant will go here.

That means we just have to remove this.

the variant will go here and that's all okay and then when we go to our page as

you can see it's starting to complain because now it needs those props okay

let's say the title is going to be let's say coded design okay that's a title and

also it needs typescript needs more props

what else let's just check here what are other missing problems we've got the

title we've got we want the variant let's use a destructive one or outline

variant okay

okay let me just remove this and act as if I'm typing from scratch so I can get these okay

I want an outline one and what else um class name as you can see guys what if

maybe I don't want to put a class name so this is reinforcing that I have to put

it at this point in time same way as the variant okay it's like some sort of re-inforcing.

Okay, let's arrange TypeScript in such a way that it's not forcing us to do that.

Okay, so let's go back to the page and then here this must be there.

We want the title.

You have a page with a title.

And then in terms of the class name,

it might be there, it might not be there, so we can put a question mark here, so that it can be optional.

And then also on the variant, it might be there, it might not be there, okay.

So as you can see now, we don't have a lot of error.

So if we want, we might have a class name, we might not have it, that's not much of a problem.

So let me move this down a little bit, let me save, let's go check guys what's going on here.

As you can see, we've got a button, a page with some sort of an outline page.

Let's say we want to change that to destructive.

okay destructive let's see as we can see guys now we've got a destructive bench Hey, what's up and welcome.

Matthew here, the hybrid, the designer and developer, the greatest from South Africa.

Let's continue with our Shetsey and Masterclass.

We are done with the badge and now I was just going to say we are going to the button, okay?

But it looks like there is something before the button and this is a bread crumb.

It will be my first time to use this component, okay?

Maybe that's why my mind automatically.

Okay, and it's new.

Okay, cool.

No problem.

Let's see.

Okay, displays the path of the current resource using a hierarchy of links.

Okay, as you can see, guys, okay, it looks like it Okay, okay, let's see This is how you use it.

Okay custom separator Let's see.

Oh, okay.

Now I see now I see now I see you know it's more like routing okay as you can see it's more like something like

this okay if you want to know in terms of the folder structure or the hierarchy

okay let's say we are having what can I say we are having a and the name of that PDF is ChetCN course, okay.

The ChetCN course is some sort of a child of many folders.

The parent folder,

let's say it's courses,

and then inside that folder,

there is ChetCN course, and then inside that folder, there is ChetCN, and the file which is ChetCN course.pdf is inside there.

So I think, think this component can be used to some sort of indicate that okay.

Let's just make sure if we are correct.

Let's try to check the code and relate what is going on here to see okay.

We've got home components and breadcrumbs.

Let's check where is the code.

um let's check the code okay let's check the code okay so as you can see um we've got h ref here

home as you can see so meaning that this is going to be like home something like this without this

this is going to be home and then when you go to components or okay,

when you go to components going to before slash year components and also the breadcrumbs where is the href for breadcrumbs.

Oh, maybe it doesn't have because in components, we've got a breadcrumb as a component.

I'm not sure.

It's also my first time to use this.

But at least now I understand what and why, what is it and how can you use it.

Okay.

So it makes sense that it's displaying the path of the current.

using a hierarchy of links as you can see guys.

So let's quickly go and implement this.

So you're just going to copy this from here.

And then lower is my terminal.

Okay, I don't think I have paste and what I want to paste.

Let's see.

Okay, NPM, I'm hit.

then let's paste this here and install it okay and then let's check this is what we have to copy So,

as usual, we are going to go to our Shetty and component.

Let's create my thread crumb.tsx,

let's use this shortcut, our fce, react functional component and let's import everything that we have to import as you can see guys, okay.

And then let's just copy and paste out.

copy and paste what let's copy and paste this okay okay and then let's paste it

here okay as you can see guys so now what we want to do we want this component

my breadcrumb Let's go to the main page and add it here on the main page.

Let's see as a self-closing tag.

Then on Windows I'm going to press Ctrl and Space so that I can import it and save everything.

Let's go back here and check.

Do we have a breadcrumb here?

I think here is it okay I think here is it as you can see it's routing to a

what can I say to a path that doesn't exist on our project that's not much of

a problem but now I want to know where is this coming from let's go and check my breadcrumbs Okay,

this is home component and or this is my program or now I see okay,

so because of the width of this, okay, this has been pushed under now I understand what's going on.

So let's just increase the width of this which is 200, let's make it let's say 350.

Okay, so that it can be a little bit bigger, as you can see guys, so this is the breadcrumbs, okay?

What could be a practical implementation?

I think that's what it is, okay?

You will just have some So if you want to go here, it will go to components.

If you want to go here, it will go to another folder, okay?

I think that is it guys.

There's nothing much I am thinking of in terms of application Okay,

but it just shows the hierarchy that this is under home and this components and this is under breadcrumbs for now guys let's just keep it simple

keep it flowing and keep it going like water let's not complicate things

unnecessarily yes I think that is all maybe as a bonus okay maybe as a bonus We can create a dynamic breadcrumb,

okay, I'm just trying to find something useful and meaningful that I can teach you instead of copying and pasting sheets and things, okay.

We can create a dynamic breadcrumb here.

Let me show you guys how, okay.

Okay, so the bread crumb needs

This is I'm just not where I want to be the bread crumb needs My bread crumb the bread crumbs needs an href.

Okay, where?

like the path.

Okay, it means the path and what else?

It also needs the title.

Okay, there's a title and the path, the title and the path.

So we can do, we can create a folder here inside the app.

let's call this folder constants is is is is constant the right name for this

folder let's just call this folder defaults okay okay let's just call this folder defaults And then inside this default,

we are going to have read from list dot TS, okay, dot TS.

And then inside here, we are going to have an object const.

And crumb list equal to, and what we are going to do, we are going to have an array of objects.

Is okay?

No, this is not an array of objects.

and inside this array we are going to have object the first object is going to be

title what's the title of the breadcrumb okay the title is home and what's

the link a link of the breadcrumb is forward slash okay

and then let's create another object okay the title might be about let's say and

this doesn't really make a perfect sense in terms of I don't think this is the best way of explaining it.

So let's just say we've got folders.

Let's make this cost, okay, courses, okay.

Inside the courses we've got another course which is shared CN, okay, or courses.

user interface courses or front end okay front end courses okay and then inside front end courses

we've got shed CN okay I want this to be more meaningful okay then we've got

shed CN as a front end cost and then inside there we might have the actual

file let's say which is shed CN book okay let's say shed CN book which is

that will be each for now this is the actual file okay let's say and then

we've got courses here okay the the path will be courses okay and then

The front end courses will be inside courses and then front end,

okay, let's say front end, and then, okay, and then the shed CN folder will be inside courses,

then which will be shed CN, shed CN, okay, Okay, and then from there, we will have the actual file.

Okay, the actual file, let's say share the cn.pdf, okay, the actual book.

So I hope you get what's going on here, guys.

Basically, we are having a file which is like inside these folders, okay?

So we want to create a breadcrumbs that will help us to click, okay?

Navigate to, let's say, different places like on courses or courses front end or courses front end, check cn, or click the actual PDF.

So the difference is, now we are going to take this from this list, okay?

This is just an added value or a bonus.

So let's export this so that we can use it.

As you can see, guys, we've exported this breadcrumbs.

So can go to the breadcrumb, this one, yes.

And then what we will do.

what we will do,

we will check the breadcrumb items where they start and where they end,

okay, start here, it here, there is a separator, okay, and then it starts here, it ends here, okay.

So I'm thinking what we can delete,

okay, this is the breadcrumb, this is the bread crumb list I'm happy with this so I think we can delete from

here up to the separator okay let's just save and see what's there as you

can see here is the separator this arrow I'm happy with that so what we want to

do now we want to

let's just open a block of code here we want this okay where are we going to

get it we're going to just right-click import it from default separate

crumb I'm happy with this and then we want to map on it

that means you look through it and then from there we want to receive let's say a cramp let's say or let's say item okay let's say item and then let's

also index index and then let's Create this okay like an auto function and Then for now let's let us retain a P tag,

okay We just want to see what will be the errors, okay?

Obviously, let's see what's the problem Okay, this one, let's see, let's see, let's see, let's see, see, where am I closing this one?

Let me close it here.

Okay, obviously, everything works well.

It's telling us that this is missing the key.

So for now, let's just put index as a key.

Okay.

As you can see,

guys, everything work well, we can look through these, let's just how

See what happens as you can see guys we've got test test test test test is not what we want actually, okay?

so What we want we want to repeat these three, okay?

the breadcrumbs item and The separator, okay?

So we want to repeat this so on to

red crown item and the separator okay why it's giving me okay and then that's

what we want to repeat so for now okay arm

let's JSX expression must be okay cool it must have a parent element so what we are going to do

here we are going to just create a fragment okay this is a JSX fragment it's just like

a container that doesn't do much okay so let's see how these are going to As you can see guys is repeating the same thing.

Okay.

Nice.

Okay.

Same thing.

So what we want to do now We want to add the actual values.

Okay.

In terms of the title,

let's put it here Okay,

item dot title,

let's go back and check the title guys Okay, as you can see, causes, front end costs, shed and we've got the actual book, okay?

And then let's swipe.

And then what we want to do, what we want to do, we want to change this URL, the href.

and then we want to put item dot link.

Okay, I'm happy with this.

Everything works fine.

Save and go back here.

So now let's say we want to go to courses, courses is just forward slash.

Oh, okay, it's forward slash courses, my goal is about that.

So if we had this path, we are going to be taken to this path.

Let's say we want front end courses, front end courses is found inside courses and then there's front end, okay.

And then shed CN, okay, shed CN in say front end course is found under courses.

And then if we want this file, we were going to get it as a PDF.

Now we are here creating a button.

This is also going to be one of those lowest hanging fruit,

very easy to do, there is nothing much in it, so let's get into it.

So if you want to have a button in your project.

You must first install it.

Let's go back here.

I've already got a Shetty project running.

So I'm just going to paste this.

Okay, and install a button as we always do.

I am going to the button is still installing.

Okay, I am going to

go to our folder, okay, where is it, the Shetty and folder, and here I'm just going to create a file, my button.tsx, okay.

as we really do our fce just to create a react functional component and then we are going to import the button,

okay We're going to import the button and we will use the button,

okay And we will use the button and this is the name of the button.

So let's just click on and take my button to the actual main page okay take this my voice about this

let's just type here button and we just need to be very okay we don't need

button we need my button okay my button this one okay as you can see from our own shall see end.

And then from then we can go and check how the button looks like here.

As you can see, guys, this is an outline button.

Okay, let's look at what are the options in the button.

My button, let's see, remove this because I want to see more options.

Okay, so we can have a destructive button if we want, which is with the right background

as you can see guys,

okay, so this is just a button, okay, now let's create, let's make this button reusable, okay, so that it can be easier for us to just reuse the button instead

of creating a lot of buttons,

so what we're going to do We're just going to open this and type title here because we want to get the title from props.

Okay, and then from there we can have title and we can How can I say type title?

Okay, title, we are going to receive it as a string, I apologize about that.

We are going to receive title is a string, this is title, let's copy this title to here.

Okay, as you can see, guys, this receive title is a string.

So now there's an error here symbol because we didn't pass title.

Okay, we didn't pass title.

Sorry.

Okay, let's just type here safe and then enter.

As you can see, guys, now we've got safe.

So this button is more like a reusable button.

If we want to cancel, Okay, if you want console, we can type here console, it type here console, okay, let's see.

As you can see, guys, this is console, okay?

on the calendar, okay?

Obviously, as you can see here with Shetty and what we are doing is more like a routine, okay?

We are installing a component and we copy and paste code and that's about it if I can be honest, okay?

As much as I am trying to give you some use cases, some extra code, but basically that's what we are doing.

um let's try to add value and see what can we do more on top of what sheds N is giving us okay

so what i'm going to do in this tutorial number one i'm going to show you the obvious um how do we

make use of tic?

a calendar component, it's going to be my first time using it okay.

I haven't used all of these components guys okay.

Some of them I'm using them just simply because I'm making a tutorial and I'm doing everything okay so what I'm going to do here let's just check first of

all how a calendar looks like I think they's okay you just pick a date here and then

obviously I'm assuming there's a certain way in which you can use the date okay

is that going to be all I'm just thinking guys as an added bonus okay

what I will do is I will always find a way or I must find a way to display.

Okay, how many days are between the selected date and today?

Okay, guys, my apologies about that.

There was a major 7 so I had to quickly pause the video.

So was saying we will find a way to always display the number of days between today and the selected date.

Let me be honest with you,

I don't know how am I going to do that and I think this talks to the essence of this channel,

I started this channel to learn new things.

The only thing that I know at the moment, there is a package called moment.js, which is very good with manipulating dates.

So like we are going to learn together.

Okay, I'm trying by all means to make these sheds.

use useful and applicable, okay?

Showing you that this works, okay?

As you can see, this is something I can do, you can copy and paste this code.

So without wasting time, let's just jump straight into it, okay?

So first of all, we are going to Install the calendar.

Okay, let's go here.

Okay, as you can see, this is the running terminal and this one.

Okay, it looks like I was trying to install a component that already exists.

Let me just click no here.

Let me just clear here, okay?

So let's install the calendar.

Let's see if the calendar doesn't have some dependencies, okay?

Some other components that it depends on, okay?

Okay, so I think the calendar is dependent on a date picker, okay?

Let's see, let's see a quote first, let's see.

Okay, I'm putting here, they are putting a calendar component, okay.

It looks like it doesn't use a date picker, okay.

Let's see on the preview, okay.

I think it doesn't use, okay.

Let's read.

The calendar component is built on top of area.

at day Pika.

It looks like.

I think we might as well install the day Pika then.

Let's quickly do that.

Nope guys, I'm making a mistake.

I'm making a mistake.

Okay.

So is the underlying react package.

Okay, sometimes these components are built on top of other sets and component.

I thought that was the case.

Okay, let's just continue guys and go with the flow.

Okay, we have managed to install this.

So now let's continue.

Okay, remember I said it's also my first time to use a calendar, okay?

So let's continue, where do I want to be?

Okay, let me minimize this, okay?

I want to be on a shared CN, as you can see, these are our shared CN components.

So let's type here my...

let's type RFCE as a react functional component RFCE, why it's not working RFCE, okay, finally it works.

Let's paste here importing the calendar because we already installed it okay, and then how to use it Okay, we have a state here.

Let's copy the state Okay,

and put it here This is a state and then

We are going to copy this calendar component and as a self-closing tag and okay,

okay, okay, let's see, let's see, let's see, pop pop pop pop pop pop, this is my calendar.

When did I put this?

Okay, let's see, is this the same?

Yes, it looks like, let me untrue, untrue, click, untrue, okay, I don't remember myself tasting this, okay?

Okay, let's see, guys, a happen.

okay, my apologies about that.

I don't know because I didn't put this, okay.

The reason why I'm doing this,

I don't like things magically appearing in my code, as much as it's sometimes they might seem like it's a good thing.

Let's say, okay, it doesn't head or it doesn't de-step me, but I like to be intentional.

Okay, remember code is not a magic.

You don't have to be excited when things are automatically happening without knowing why.

So that's why I had to reverse this and I have to copy and paste these myself.

Okay, I'm just minimizing unnecessary part.

So let me copy and paste.

This is the same thing as you can see, but at first, I didn't know how it appeared.

Okay.

That a big problem to me.

So let's just click save and then let's take my calendar to the normal page.

Okay.

Let's create a self closing check.

And then on Windows, I'm just going to press control and space.

And I'm going to import my calendar.

Okay.

So if we were just following our Shetzi and this was going to be it okay okay as you can see guys here

is the calendar okay it looks like it's not built on top of any other Shetzi

and component like pattern and other things okay so that's cool

let's um what day is it today okay let's see um today it's monday okay it's monday this is may way

the 27th let's see yes the 27th is monday okay cool So, here is the 27th.

It's Monday.

Okay.

So, as you can see, guys, if we were, what can I say?

If we were just copying these threads in component, by now we were supposed to be done.

But let's make this meaningful, okay, or at least applicable.

Okay.

First of all, let's get the selected date.

Okay.

So how are we going to do that?

Let's check on my calendar.

We've got a state here.

So, selected is equal to our date, okay, on select, okay, this will set the date, okay.

So that means the current date we have it here, okay.

So how are we going to do this, let's do it like this, let's do it like this.

let's do it like this, let's alert, will that be the best way?

No, I don't think so, okay?

Let's do this guys,

let's have a react div here,

let's just have a div, put this one here and then let's have a p-check Let's have a P tag.

And then in this P tag first, let's check what type of data type is this.

This is a date.

Okay.

So, let's just put this date.

Then now let's go back to our usual way of which is feed link.

I'm not the best.

I'm not a guru in React guys.

Believe me, even in JavaScript, okay.

So I feed a lot.

So now I'm going to apply one of those.

This is a date.

I'm just going to type brought here to see what are the methods that are available.

As you can see, guys, this is date, okay.

Let me try it and see.

that I have to call it like this.

As can see, it looks like I have to call it like that.

So I'm just taking chances.

I'm that type of a guy, okay?

Not a guru, I don't memorize code, but I use whatever that I know to pass by.

So let's check if we can get the date here.

Okay, as you can see here, we are having one which is on the day.

Okay, let's click here.

This is day four.

Now we need to understand what is going on.

Okay.

Okay, I think this is the day of the week.

Let's click here and see if this is a day of the week Today it's um, I think it's Monday.

Yes, Monday is day one.

Okay, this is working guys This is day two day three day four day five.

Okay, cool.

We are winning guys.

Okay, that means we're able to what can I say to get to make use of that date okay okay then let's see what else

can we get here let's say plus put a space there okay just put a space and

then let's say date dot get date dot get okay let's say dot get date I hope it's a string is it a method okay let's write this okay let's see okay so the date is

the 31st the date is at 1 to 2 the date is the 9th.

We are getting there guys.

So as you can see it looks like we can get whatever that we want from this date.

What else do we want to get?

Let's try the last one.

Let's try the last one to see.

Okay.

What else can we get from here?

I don't get date.getday.gethours.

I'm not really I'm not interested in those.

Not set.

I want that.

Okay.

Can get the month?

Let's see.

okay this is set let's go back to get get our get month it looks like we can get

the month kind okay okay let's see let's see let's see okay Okay, this is the fourth month, okay?

Chania of about a April, it is the fourth month, the fourth month, May or April, okay?

It's something that I don't understand here,

but anyway,

you can make some experiment guys maybe you even understand this more than me okay so remember

what I said I said there's a package that I know which is moment dot JS okay dot JS moment

dot JS let's say Let's see, do they have an MPM package, MPM package install moment, that's safe, okay, this is Jan, okay.

So what I'm going to do I'm going to make use of that we're going to use

that calendar like in conjunction with moment.js and see what what what can we create

remember we will say we're going to get the date difference in terms of days okay

so let's see okay there is this method let's say moment.subtract 10 days.calenda, okay, multiple local, nope, okay, let's see, let's see.

Let's see.

Let's see moment.

Okay.

So first install the package and see how it works.

Okay.

Even guys, if I can be honest, I don't have like more information about this package.

Okay.

I know it exists.

It makes handling dates a little bit easier.

Also, let's check here before.

Let's check here moment on MPM and see.

get a example.

Okay, as you know by now, I'm not a big fan of memorizing code, and I don't claim to be a guru, a guy who knows everything.

Okay, so let's learn together, guys.

It looks like there are no examples here.

It only takes you to a documentation.

Okay, and this is the same documentation.

Okay, cool, no problem.

If then it takes us to the same documentation, let's just click this documentation.

So let's install it, moment.js.

Okay, so what we are going to do, we are done installing moment.js, let's see.

Okay, I think we are supposed to import this moment and then we can use it.

Okay, suppose moment.js is there detailed documentation?

Docs are.

project status, you probably don't need one, I don't see us anymore.

Okay, I need okay, I'm looking for the documentation.

Okay, do do do do do do do.

It looks like we don't have using moment.js npm install cool, this is node.js, nope, I'm looking for React Maybe.

Not TypeScript.

All right, maybe it's me.

maybe it's me let's first take chances as you know here at correct design we take chances okay

so let me do this let me minimize this okay so here let me type const let's say const tm for time

is equal to

let's say moment okay moment isn't there let's see if I press control and

paste here there is nothing with the moment here that means the feed link doesn't work let's try this guy so If nothing works,

don't mind much.

We have a solution.

We ask Chachapiti.

Okay, let's see.

Okay, let's say moment, let's say from moment.

Okay.

okay moment doesn't have an expert and member moment if it's not an expert that

member let's write this okay maybe it has got the hook use memo okay as you can

see guys our find a find a way doesn't really work the way we want.

Okay cool.

That's right such a big T.

Okay.

Can you show me how to use moment moment.js in react type script to subtract dates okay okay I think this is Okay,

let's see,

install moment.js and it types and its type script types,

okay, as you can see, and also its types cool, okay, let's see, input moment from moment, didn't I try this.

okay now it doesn't complain but before yeah now it complains I remember let's

say oh now it works okay I don't know maybe we didn't do it the best way okay

fine now there is no need for us to do a fender finder if charge deputy is telling us exactly what to do okay.

Defying two dates,

date one moment, this is date one, date two moment and then const different dates, date one dot div, okay, in terms of dates, okay.

This is what we want to exactly guys, okay.

I'm happy with this.

Let's Let's see, first is it working?

The way we might want, okay?

Let's display date difference here.

Okay, what we can do, we can delete all of this.

And then, Okay, this is 2023 or 527.

This is 2023 or 520.

Okay, let's see what it will display here.

Okay, that date difference, it's seven days, let's see.

From to 27, it makes a perfect sense.

Okay, let's say this is 2024.

What day is it today?

I it's 04, 04, 04, 05, and you have a very much April, May.

I think May is 05, right?

Is 05, okay?

Cool.

And then the same May,

let's see 2024 it's the May but now the date is going to be not the 20

let's say it's going to be the 25 okay the 25th let's see the date difference in

terms of days it's two days it's working right cool now let's use our own mind to get from this,

okay, to get that date from this, okay, from this one.

So we must have this date as today's date, okay?

So, we have this day as today's date, so let's see, date 1.date difference, okay, date 2 in terms of days, okay.

So that means the current date,

it's date 2, let's make date 2.27 and we are going to change date 1, okay, so we start with 27.

and then we want to change date one.

So we get date one from this date, okay?

So what I'm going to test first here, I'm going to some sort of put the date as a string.

Can I have two string here?

let's see is there any possibilities of that to string let's see okay I just

want to see does that exist yes it looks like because as you can see guys this date

is in form of string so let me tell you do we have a string date as you can see guys here The string date,

okay, let's see if moment.js will understand this as a date, okay?

Let's see if moment.js will understand that as a date.

Let's see Let's see, let's see, let's see, let's see, let's Let's copy this Okay.

And then we are going to put it to day one.

Okay.

Let's put it to day one.

Okay.

And then let's display the difference in days.

Okay.

Let's display the difference in days.

and then let's go back and see.

Okay, now it's minus 18.

I'm not sure if this is correct, okay.

It might be because as you can see this date is behind this one.

Let's just do a quick check.

1, 2, 3, 4, 5, 6, 7, 8,

9, 10, 11, 12, 13, 14, 15, 16, 17, 18, it guys it's working okay let's click

on the 27th this is zero days okay on the 30 it's three days and on the 31st it's

four days okay as you can see guys we have just created something meaningful out of our sheds and date, okay.

At least I've also learnt something, okay.

I didn't really, I have not used moment.js if I can be honest.

Now, at least I've got a bit of understanding how it works.

And guys,

these packages,

the more you learn other packages,

I think they've got some sort of a certain standard in a way, they are not different from each other, okay?

For instance, You import moment from moment just like any other packages, okay?

So that's why I always try to take chances and see, can't I figure out something of my own, okay?

So, I'm happy if you have learnt something, let's go back to here, I'm proud of myself to have created this, this is interesting guys, okay?

You have a picture of how happy I am to create this because this opens like a lot of possibilities, okay?

I'm going to use this functionality in a lot of things.

Counting down, maybe in a project-based application where, let's say, the deadline, what can I say?

At the cut of time, let's say, an application that schedules projects, okay.

Let's say I'm receiving a dev project from a client, okay, to say that this is what I want.

So I have to ask the client how long

do you want me to take maybe they will say three months so I will put a starting date

here and then this is July or September October and then I'll put the ending

date and then I will know that I am left with hundred and fifty seven days each and

every day this will decrease reminding me that okay I'm left with only these

days okay so this opens a lot of possibilities for me that's why I wanted

to try it I think this is also one of those videos which are going to be very,

very, very quick, quick, because is nothing much to do here.

This card,

I think it's one of those are input and containers,

okay, when you are developing a real-life application and feel like, I wish I can get a four-corner container with nicely

layout, and that is it.

So this comes handy when you want to do that.

So without wasting time, let's just follow the instructions.

At the moment, I don't have a practical way in which you can use this.

Maybe as we continue, I will think of something and then we will implement it right there.

I like to make these tutorials and attach some sort of a simple practicality on how can

you manipulate it and use it in real life, okay.

So let's just do what they are saying here, let's copy and then let me go to the Tamina and let's publish about that.

this okay and then what we are going to do next we are going to copy all of this

input we are getting into the usage so as you know by now we are creating our own

components here on this folder so let's copy my card.tsx And then RFCE doesn't work,

RFCE, maybe it want me to be slow, as you can see now it works, and then let's put all the inputs, okay, and then from then let's copy and paste

this as it is.

Okay, copy and paste this as it is.

I'm happy with this.

As you can see, guys, everything works well.

So why don't we just take this my card component to the main page so that we can display it.

Okay, this is my card component, self-closing tag.

Let's see how it looks like.

OK, where is my card?

Here is my card, OK?

I think what I can also do.

Let me to what?

Let me go to what?

Let me go to the main page and OK, it the main page.

And then in the main page, what I will do is the main page.

Okay, here is the main page.

This is the class.

Okay, what I want to do here, let me put the width k of full size.

Mass it before.

I don't think it has to be full.

That's about 550.

And height.

For the height, let's say it's, let's put the height of screen.

Okay.

Let's put the height of screen and let's justify content center.

Okay.

Let's.

Okay.

item center, item center, let's not forget to put some flex there.

Let's just see how things are at the moment.

Okay, this is somewhat there because I want all of these to be feasible.

Okay, but now they are arranged in form of a role.

Okay, so this means that let's make also a width of screen here and let's see Okay, I want all of these to be visible.

Okay, I think this is somewhat it okay this is somewhat it let's make this auto okay now I think this video

is becoming longer unnecessarily okay okay let me deal with this later then okay

because now this video is just going to be longer unnecessarily okay let's see Okay,

and then let's type a flex column, okay, flex column in the gap of, let's say a gap of five and pairing of four.

Okay.

I'm happy with this.

As you can see guys here is our card, okay.

So this is the card title and the card content and the card footer, okay.

What else can we do here with this?

Let's try to make this a highly reusable card component by passing props.

So let's go to my card.

Okay, we've got my card title.

Let's put our props.

We can receive a title.

Okay, description.

content and what else and the footer okay all right as you can see guys now we

need to type these okay we need to put some types okay because we're using Type script Let's type these.

Okay, so let's be clever.

As you can see, this has to be a string.

When you are describing something, you have to use alphabets all like sentences to describe it.

But in terms of the content and This can be a lot of things, okay?

In this content, we can be able to push this date component here.

So that this doesn't have to be a string.

It needs to be a React node, so that it allows strings, and it allows other components, okay?

So I hope you do get that one.

So.

let's make this a string.

Let's make this description a string as well.

But terms of content, let's make this content a react dot react node.

Okay, this to be a capital letter.

okay not react node and react node okay let's copy this

for this for the footer as well so that if in the footer we want to put some button we can put

those so as you can see guys okay as you can see so now here this guy

is expecting those okay so as you can see it's expecting those so let's quickly

ask supply those so here the title is going to be let's say

um calendar this is not a yeah let's just type calendar guys okay for simplicity and

then after that we've got the title what else is missing there title is missing description and content okay description My apologies about that,

let's go to description,

description, let's say, calculate, um, days

for now let's just say between dates okay between two dates all right and what

else content in terms of the content okay in terms of the content remember we said we are going to put the calendar Okay,

where is the calendar?

Let's put my calendar in there in terms of the content, okay?

And in terms of the footer, let's put a button there, okay?

As you can see guys, now this is becoming useful because we are also putting components.

Okay, I hope this is ready.

Let's check guys.

Okay, how it is now.

It's going to refresh.

Now, now let's just wait.

Looks like it's not refreshing.

Is there an error?

No.

Okay, let's refresh.

Manually, let's see.

Is this calendar going to get inside this cut?

Why that is not happening?

Let's go back.

Let's see.

Let's see guys.

Okay.

This is my card.

It has got everything.

I'm happy with that.

Okay.

Let me just chill this terminal, clear everything, and let me run it again.

NPM run.

Let's just double check.

This is my card.

Okay.

Oh, okay.

My apologies guys.

This is my mistake.

I didn't change this title to be this.

Okay.

This is my mistake.

My apologies about that.

Looks I'm asleep now.

Okay.

Let's copy the description to be here as well.

well, okay.

All right, and then our content, let's put the content here.

And let's wait for it to refresh or if it's not let's refresh it manually okay let's

see this is supposed to refresh and put everything there I think everything is

just working fine Scorbic reasons see I don't know why it's low my apologies about that,

but as you can see guys here is it okay We've got a calendar

Calculate this is the wrong spelling calculate days between two dates

Let's see again as you can see minus two of days Between now in this date.

It's only four days as you can see that this is the practical use of a calendar, okay I don't think there is something else.

Okay, calculate days and now we are getting into the fun stuff.

Okay, and that one is the carousel.

Okay, as you can see guys, it's more like a sliding what can I say component okay this could be images and everything as you can

say guys this is interesting okay let's just see other examples okay so I think

this one is going to be the longest Because this is not like a straightforward component,

if I can be honest, there's a lot of things that we need to look at.

Whenever I'm working on this component, I always gate something right and the other one wrong.

Get something right and the other one wrong.

I have been in that loop for a very long time.

So now what I'm going to do here, we are going to take step by step.

Remember, in this channel, as much as I am trying to help other people to understand code, but the intent of this channel is to help me to become a better developer as well.

You see, me and you are not the same.

Sorry, me and you are essentially the same.

We are not different.

That's what I meant.

I am also learning as much as you are learning, okay?

So let's see if Matthew from Coded Design can improve and now master, okay?

What the carousel, okay?

I'm going to take it step by step

and I'm going to explain to you things that I find confusing and things that are a little bit difficult for me, okay?

Are you excited?

I'm also excited, okay?

Let's get into it guys.

I think we can win this, we can do this, believe me, okay?

So, let's start from scratch, okay?

Okay, a carousel with a and swipe built in with MBLA, okay, okay, cool.

And then how do I install it?

Okay, Carousel, let's see.

Copy and paste, let's go back here.

And then let me just clear first, okay.

Well, clear, okay.

I think my apologies about that.

Everything has been cleared.

Let go back here, copy and then paste here.

And we have installed the color cell, okay?

Now let's come here and check the usage, okay?

First thing you have to import.

And then let me go back here.

and type in our components folder let's create a component my carousel okay let's

name this my carousel one since I believe we are going to have different

versions of these carousel and we are going to do all of them okay Alright, so RFCE as usual.

Okay, and then we're going to paste this.

Okay, I hope this is easy and you are following at the moment.

And then let's copy this and then paste it here guys.

Okay.

Paste it in here.

As you can see everything is working well and what else I think we can input this on the

main screen my carousel one okay my carousel one okay let's do that right in the end.

Let's import to my Carousel 1, okay, self-closing tag and say, let's just go back here guys and see how it looks like.

Okay, let's see.

Okay, this is how it looks like.

Let's see is this how it is on shed CN.

Okay, let's see, let's see, it looks like that's how it is on shed CN.

Okay, as you can see, these are just dots, meaning that we can We are free to do whatever we want to do, okay?

Since we've already got components here, okay?

For instance, check here guys, okay?

We already got some components where is the ratio aspect ratio.

I am missing one component here, okay?

There was an aspect ratio which was here that had an image.

Or maybe I wonder why it has disappeared, okay?

Maybe it's because it doesn't have the width and height.

It might happen, okay?

Let me just go to this, okay?

And then the width is like this and Okay, okay, okay.

I why this has disappeared.

I am not sure guys.

Okay, let me just give it a height of I'm just testing

Okay a height of 100 pixels, let's see Okay, now I think it's visible a lot of things is going on wrong here, okay.

Maybe it's because the height of this overall container, it's what can I say, fit to screen or screen, okay.

Let's try these guys.

Let's make the overall height of this.

okay here's over the height of this let's make it auto okay let's make it auto

let's make it auto do we have some padding here we've got a padding of um padding of four let's

make a padding top of let's say 20

and see okay I think this is better guys as you can see now we see all our components okay

and I'm happy with this and we can see this as well what if maybe let's go back to now to

Let me apologize about that,

I want the aspect ratio,

okay, where is the aspect ratio, my aspect ratio, okay, let's just remove this height for now, let's see, okay, everything

works guys, okay, so as you can see guys, we've got this component, so what we're going to do, we're going to take this one.

and put it in inside here instead of the dots as you can see guys okay and then what I want to do

let me also try padding bottom of 20 okay, heading bottom of 20 so that we can see everything from here.

Okay, as you can see, guys, there's a space now.

Okay, I'm happy with this.

And then let's take on the main page.

Let's put inside here, where is my carousel one.

And then here, let's import my polish about that.

Let me remove only the dots.

Here let's input aspect ratio,

my aspect ratio,

okay, aspect ratio, okay, my aspect ratio, okay, here is it, has a self-closing tag and then I am going to

for all of these remove the dots okay remove the dots okay okay as you can see

again let's go back and check okay looks like

as you can see guys okay looks like we are winning 100 percent okay what I'm

hoping for I'm let's see why do we have this space okay why do we have this space

okay so let's go and check I was hoping that we are not going to have that big

space okay let's see The width is 200.

Okay, so what I'm going to do, I'm going to set the BG gray.

Okay, this is more like we are debugging now, we want to know what may be the problem.

As you can see, we don't have any gray here.

The only gray that we have, you might not have any.

you might not notice it.

It's right there.

So means this component doesn't have a problem.

Okay.

That the challenge might be in our carousel.

Okay.

Check guys.

Okay.

Now this is rounded.

Now let's go to the carousel.

And then let's check my carousel.

Where is it?

My carousel one.

Okay, it like Matthew is getting old and he cannot see his own components.

Okay, here is it.

Now let's see why it's too big now.

Okay.

Let's see what do we have here.

Do we have a class name here?

Let's put a BG of,

let's see,

as you can see guys, okay, now this guy is too big, I don't know why it's too big like this, I don't know, okay.

So what we can do, let's make it more or less like equal to this one, okay.

here guys you can even put your own image anything here okay so what do I

want to do now I want to know the width okay or My aspect ratio,

okay, let me just use a shortcut P here, okay, a limited type ratio, okay, as you can see guys, this is the shortcut.

So, this is 200 pixels, okay, cool, and then what I want, it's carousel, my carousel one, and then I want this carousel one.

to have a width of 200 pixels okay okay let's go back here guys and see now this

is what we wanted okay exactly what we wanted what about the background we don't

want a background color here okay

nice okay as you can see guys this is what we want exactly okay so we are done with

the first carousel it's doing exactly what we want I am happy with this okay

um what else let's go to carousel number two okay happy with this Let's go to carousel number two.

So have one,

the first one,

okay, go back here, okay,

your GSX,

All right,

my apologies about that,

okay, I want to do RFCE, all right, looks like we are winning, go back here, shut the end, and then, um, um, exactly.

sizes to set the size of the item you can use the basis utility class on the

carousel item check okay this is a continuation now it's telling us to set

the size okay this is the example okay this is the example so what we

are going to do

we want this example okay I think if we can go here in this code we will then

import this and okay okay let's see let's first copy the import first All right,

I'm happy with this, and then let's go here, the carousel, carousel, okay?

Come here, paste this here as it is.

Good.

Now let's import the carousel to here where on the main page, okay.

Cool, self-loathing tag on my windows, I'm going to press control space, Then done.

And then let's come back here and check.

As you can see, guys, here is the carousel 2, okay?

Carousel 2, I'm happy with this.

So what we're going to do, we're going to put these guys here.

okay let's see let's see okay let's see see okay it looks like an array has been created here who look through,

okay, like five items, as you can see.

Congratulations about that,

it looks like I'm feeling sleepy,

I'll put it about that,

and Now what I want to do,

I want to put my images here first,

okay, so that I can use my images instead of the numbers, all right, all right, all right, let's see, oh, okay, I think I

can win, think I can win.

Okay, so what I'm going to do instead of having a card here, okay, as you can see, here is the card component, okay, what I can do, okay, let me comment that I can replace

that with my aspect ratio.

Nope, not this one.

My ratio, this one.

Okay, as you can see guys.

Okay, so let's go back and see, as you can see guys.

Okay, nice.

Okay.

Obviously we are having a problem here because the height is not the width is not the same.

The height I think is 100% perfect but as you can see the width guys okay.

So how can we change that?

Let's go back to the code and see.

So, um, in the code, we were told that we can change the width by changing this basis.

Okay.

So obviously, guys, I'm not sure what's going on here and how this works.

But let's first go to the documentation.

To set the size of the item you can use, basis utility class on the Carousel item.

Cool.

Where that?

Let's check here what they are saying.

They of the Carousel with, okay?

Meaning let's first deal with the Carousel with first, okay?

Okay, as you can see, this carousel width, I think it's small, okay?

So let's go to the carousel, okay, aligns that width, okay, width full, max width SM, okay?

Let's just remove that.

and let width of full without a limited max.

As can see guys, now this is the width of full, okay?

Based on this, I think that is too much.

So let's give it a width of, let's say 400 pixel and let's see.

how it looks like okay still small let's give it width of 600 okay I'm happy with

this guys this makes sense to me but this is not all as you can see this

is not showing like all of it okay it's not showing all of it Maybe,

let's say 650, okay, I'm happy with this, everything is visible, okay, as you can see, guys, nice, okay, okay, Okay.

And now let's go back to what they were saying.

So what we did, we've just put our item, okay, carousel items, okay, in our case is these aspect ratios.

And we did nothing when it comes to this size, okay?

these facts bases as you can see here it's telling us that this is 30%

of the carousel with as you can see okay which is it's one over three bases it's one over three this one is one over two

50% okay Let's just make some changes here and see what will happen.

Let's make this one over three and see.

Okay.

Is a difference?

Not really.

Okay, MD, okay, let's make one over two.

This was one over two.

Let's try one over one.

Okay, I just want to understand what is the impact of this, okay?

Okay, let's check the responsiveness or maybe what applies here, it's since worried on

large, let me just remove this one, okay, so that I can only have one thing that I'm dealing with,

because now this might not apply, okay, because I'm not inside it, maybe the one that will apply is the large one.

So I want only this to apply as you can see guys.

Okay, now that we've removed that one now This is active now if we can be able to test what's going on there.

Let's put two Let's see as you can see so meaning that in here.

We only put two of these okay as you can see But in our case,

I think 3 will work 100%, okay, I'm happy with this.

So means it's like that fraction,

some sort of represent how many items we can fit on each viewable area, okay, like here, okay, I hope you can see.

I'm happy with that.

If you are enjoying this content and you like this content, please don't forget to subscribe and support the channel.

So let's go back and see what else do we have here on the carousel.

Okay, this is just a different arrangement and this is like spacing.

what else this looks like the same as the one that we did okay do we have another

one let's check here the one that um the one that's grown vertically okay the

one that scrolls vertically so we are done with this I can remove these guys, okay?

Okay, let's see what we can do.

Let's create another carousel.

Three.

RFCE

Save let's go back here

Okay orientation use orientation clock to set the orientation of the carousel

So let's see Where do I set the the orientation in the carousel itself?

Oh, well, let's see options.

Oh, we've got the orientation here.

Okay.

So necessarily creating a new one, let's just use this orientation and see what will be the effect of that on this one.

Let's check my carousel tool.

and then carousel content no somewhere here okay we want this to be vertical let's see guys

as you can see guys now it has changed okay it has changed um but obviously now i don't see Okay,

in terms of vertically, it looks like every image has been shown, that's why we don't have the arrows, okay?

So let's see, let's click to here on the basis, let's see what will happen.

Not really, maybe it's because this has got a defined width as you can see, but it doesn't have a defined height.

So let's leave this to 3 and let's have a defined height.

a defined height which is let's say for now it's 300 pixel.

Okay let's see.

Okay let's see we do have an RV here but obviously um

it doesn't do what we want guys as you can see okay so let me just try 200 and see

okay let's try 200 and see as you can see it looks like it doesn't change let's play around with these

I'm not sure if this makes sense as well, I'm not sure I'm just testing guys, okay?

Okay, it looks like there's nothing happening, I don't have a problem with that.

So what we are going to do, let's just copy from this one, and what these guys did.

Okay, let's see, with full, and this is the MUX with XL, okay.

Okay, the height is 200, okay, okay, and then And is the same thing, they are looping through, let's say the preview, yes, okay.

They are looping through, go back here, they are looping through here and what else?

I think there's nothing much here guys,

okay, there's nothing much so what we can do, let's not convert this one, let's just create a new one as we have.

Let's go back here to orientation,

okay, let's just click on to and to and to make sure that all the changes that we did, okay, it goes back to normal as you can see.

So let's copy this.

Let's copy this code.

We this one.

Let's copy this code.

Okay.

The first.

The import way is my Carousel 3.

Here is it.

Then let's import here.

Okay.

And then from there we want this, okay, cut content, cut, cut itself.

Okay okay let's import the cut okay I'm happy with that so let's bring my carousel

tree here let me just copy this and change the number

obviously we have to import it all right let's go and check still loading let's see as you can see

here is it guys okay it works perfect but We want to study it and see what makes it work that way,

okay, it is what aligns that orientation is vertically, okay, the width is full, the marks width is excess, okay, okay,

content, match in top, it's negative one, and the height of 200.

So the height first, it's some sort of limited is 200.

Okay, let's see.

Okay, what else?

Okay, the basis on meet, it's 1 over 2 okay and then that's it okay this looks like the same as the top

one okay looks the same as the top one let's see guys let's write this okay if that's not much of a problem.

So, carousel item, we are going to copy this on the carousel item and change the orientation.

So, let's go here to carousel 2.

Where the carousel item?

Okay.

Let's just copy this and see.

Okay.

Carousel item.

Okay.

Then let's change this Carousel item orientation.

okay orientation,

vertical, let's see why our buttons are disappearing, everything works but the button are disappearing, okay the height, let's see Where is the height?

Where the height?

Where is the height?

Let's go back to 3,

okay, the height, which is this one, let's just copy this and paste it here, the content, okay, and the height, Oops, class name.

Let's see, guys.

Something has changed, but I'm not sure if for beta or for Wes, okay?

This is this one.

and this one now this has changed okay okay cool and then what can we do let's

make this height as a 400 okay as you can see now I have lost the buttons It's the buttons now that I've lost.

I know where are the buttons.

Okay, I Cannot tell you where are the buttons looks like everything it's working well

Okay, which button are these okay, I think these are the buttons

Okay, this one is for this one, this one is for this one, this this one.

I this one is for this, okay.

What is the width?

Oh, okay, okay.

Let me do this kind.

Let me remove this for now, this one.

I think I do get the essence of what's going on here.

Let's go back here on Carousel 2.

On Carousel 2, let's check the width of this.

As you can see, guys, the width of this 650.

Let's put the background here.

as you can see okay now we have one okay we've got our patterns that with let's

make it auto so now we have managed to change a horizontal carousel to a vertical carousel, okay?

Let's put auto here and see first.

100% is it, as you can see.

It works exactly like the other one, like this one.

I can even remove this background.

Who acts exactly like where is that one?

Okay, like this one Okay, as you can see guys exactly like this one, okay?

We are on the checkbox, okay?

This is one of those shorter ones, okay?

I didn't think of any way in which we can make this interesting, okay?

Unfortunately, I think this one is just going to be a copy and paste, guys.

that this is it.

Okay, maybe I'm having some experiment in my mind.

Something that can be tricky.

Okay, I just have to reserve it at the end to see if it's going to be webbed.

There is some sort of a tricky part about this is a checkbox.

It's not a radio box.

Okay.

checkbox are easy because you can check multiple boxes at once okay I thought

this was a radio button let's see yeah this is a checkbox okay cool this is

going to be a straightforward video guys let's quickly do that copy this NPM

and then let me just type clear here to clear everything and then let's

place this chess box here and then what we are going to do we are going to go to our

library okay I'm going to type here my checkbox okay.tsx and then that is it

okay and then we are going to copy this code here okay and then from there this

is the usage okay I'm done copying this and then this is the usage I think that is it okay That is it.

And then what I'm going to do, I am going to input this on a page, my checkbox, here, okay.

Okay, as a self-closing tag.

here and see the checkbox where is it this is supposed to reload if it doesn't

let's load manually okay let's see let's see let's see it's supposed to be here maybe let's see Let's see guys.

I think it's behind this, okay?

So what I'm going to do, let me go through here and let's make the gap very, very big, okay?

let's make the cap of 12 okay so that these could be at a distance okay as you can see guys

now we can see the checkbox okay now the checkbox is visible but still let's make a

cap of 18 okay as you can see okay maybe there is no cap of 18 let's try 20 Okay,

as you can see, now there's a big gap between the components.

I'm happy with that.

Okay, let's see.

Here a checkbox.

Okay.

Now what I want to do, let's just go back here.

Okay.

First of all, I'm What if I want to get the value?

Okay, what if I want to get this value?

How do I do that?

Okay, as much as I thought this is just going to be a walk in the park, it looks like now we're

getting into the real stuff.

Okay, that's interesting.

Let's see what they say.

Okay, this is how you use it.

Cool, let's check the manual.

There no code okay let's just example with text let's check okay where are the states

values and whatever how do I know this has been picked and all that okay so

they are importing it here with text and then they've got all the more Okay,

and this is a label, okay, HTML4, um, term 1, times 1, okay, where is the checkbox then?

Okay, maybe this is a terms and condition, let's see where the checkbox itself, okay, here is it checkbox ID.

Okay.

Let's look at the preview.

Okay.

Yeah, the terms, you click here.

Okay.

I don't think here they are using it.

Okay.

I don't think they are using it.

Let's say I agree with the terms and maybe I press submit how.

How do I know if this has been checked?

Okay, I think now this tutorial is starting to become Interesting because I also don't know how okay.

Let's check here.

Do they have a certain state or something?

Okay, how do you check is checked of that?

Okay, maybe in this submit Now we are talking, now they are going to tell us, as you can see this

is false cool, this is what I was looking for.

Let's see how they have done that.

I'm not you looking for the forms and zod and everything.

I think that's interesting to me.

me so let's go to the checkbox as you can see we've got checked and on check

change cool okay that's fine now let's go back to our own okay okay for instance

let's just

reset it as you can see it's not checked let's make sure when we start the default it's checked

okay so what we are going to do we are going to go to this check box okay this check box

and then in this check box we are going to check here check and then we're going to put this to true.

Okay, let's go back and see, as you can see, by default it's true.

Okay, and then we have a function here on, maybe it's on change.

Okay, Maybe it's on change now what I want to do.

I want to have my own state variable here To keep track of the state of the checkbox const Okay,

set check Okay,

and check let's say okay this is check and set check is equal to use state okay use state okay now I

see the problem suppose here there is a calmer

check and set check is equal to use state check okay fine and then let's see Let's set here,

let's create a function that we're going to trigger on the event,

it's cool let's just check this as it is now to see okay so that it has not been

listening to the event as you can see guys we just got it okay it works perfect

okay it works perfect so If we want to,

what can I say,

okay, let's say we want to alert something as we wanted alert, okay, my apologies about that guys, okay, I really apologize.

I didn't just check, okay, as you can see guys, okay, 100%.

I just missed the event okay.

So obviously I said this is going to be one of the is one and

it as easy as it seemed it looks like it was not easy okay just because of this

event okay my apologies about that as you can see guys everything work is not

on change is on check change then this is being triggered okay now we are here

on collapsible okay let's just quickly check here collapsible here it is First things first, I find this control a bit confusing, okay?

Maybe it's not confusing, but I can't locate some sort of a use case for it.

What is it used for?

So please guys, if you have an idea of where it can fit and how it can be used, please let me know.

It looks like, what can we say?

It looks like an accordion, okay?

When you click here, something pops underneath it.

and at the same time it looks like it behaves like a drop-down list,

okay, but then I'm not sure if I can put some buttons here for selecting

as much as I'm going to use it and implement it but if you have a perfect

scenario for it okay maybe you tell me or we try to discuss on how different

is it from an accordion okay if you can take one accordion let's see where is an accordion okay Okay,

if we take one accordion without this, only this one, and then it shows three things underneath it, okay?

How is this pattern different?

So how this component?

So let's get into it and see how to implement it.

I haven't figured it out when can you use it and why okay I really don't know

okay so let's continue guys let's keep it going and keep it flowing like water

okay let's just get in here let's see everything and then let's install the component.

Okay, let's install the component and then after that, let's check what else do you want to do, we have to import this,

okay, import this, collapseable, let's go to our sheds in UI library.

okay my call up server okay let's see and then let's input those as you can see

guys were inputting these and then from there we are going to copy this as it is,

okay, the collapsible, and then we are going to put those here, okay, as you can see.

Let's now input my collapsible to our main page as a self-closing tag, and then, Let's press ctrl space and then let's import it.

My collapsible is not defined.

Okay, now everything works.

Let's go back here and check.

Okay.

okay can I use this in my project let's click yes free to use okay and then how

you can click on it and collapse it well guys I don't want to lie I'm I'm a bit

confused with this component okay if I

a chance to meet the shots I team I don't know I don't know where can I use this component

okay as you can see now my problem is you see an aquarium it's stable okay stay in one place okay

stay in one place at least

and this one it's a bit different okay it moves on different places okay maybe

it just depends on your skill as a developer and your creativity I think but All that I have for this component.

Okay, I really don't understand like the essence of it.

Okay, I Don't think it's solving a unique specific problem.

I might be wrong guys, please You can shoot a comment below and help me out here.

So it has got a trigger and then when you trigger this and then it shows This okay Okay,

I think that's will be it for for this video.

My apologies if this is the shortest video of All of this video of all of the videos in playlist,

but I Really really maybe I need to make a research and maybe I can come back and if I found a perfect use case for this

Then that would be it guys otherwise For me, Matim Singati, that's about it.

अनुवाद भाषा

चुनें

सारांश निर्यात अभ्यास

अधिक सुविधाओं को खोलें

ट्रांसी एक्सटेंशन स्थापित करें और अधिक सुविधाओं को खोलें, जैसे कि AI उपशीर्षक, AI शब्द परिभाषा, AI व्याकरण विश्लेषण, AI बोलना, आदि।

मुख्य वीडियो प्लेटफ़ॉर्म के साथ संगत

Trancy न केवल YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera जैसे प्लेटफ़ॉर्मों के लिए द्विभाषीय उपशीर्षक समर्थन प्रदान करता है, बल्कि नियमित वेब पृष्ठों के लिए शब्द / वाक्य अनुवाद, पूर्ण-पाठ तार्किक अनुवाद और अन्य सुविधाएं भी प्रदान करता है। यह एक सच्चा सभी-एक भाषा सीखने का सहायक है।

सभी प्लेटफ़ॉर्म ब्राउज़र का समर्थन

Trancy सभी प्लेटफ़ॉर्म ब्राउज़र का समर्थन करता है, इसमें iOS Safari ब्राउज़र एक्सटेंशन भी शामिल है।

विभिन्न दृश्य मोड

सारांश, पठन, मिश्रित और अन्य दृश्य मोडों का समर्थन करता है ताकि एक समग्र द्विभाषीय अनुभव हो सके।

विभिन्न अभ्यास मोड

वाक्य लेखन, वाणीक मूल्यांकन, बहुविकल्पी, वाक्य लेखन और अन्य अभ्यास मोडों का समर्थन करता है।

AI वीडियो सारांश

वीडियो को संक्षेप में देखने और महत्वपूर्ण सामग्री को तेजी से समझने के लिए OpenAI का उपयोग करें।

AI उपशीर्षक

केवल 3-5 मिनट में सटीक और तेजी से YouTube AI उपशीर्षक उत्पन्न करें।

AI शब्द परिभाषा

उपशीर्षक में शब्दों पर टैप करके परिभाषा देखें, AI-संचालित परिभाषाओं के साथ।

AI व्याकरण विश्लेषण

वाक्य व्याकरण का विश्लेषण करें ताकि वाक्यार्थ को तेजी से समझें और कठिन व्याकरण बिंदुओं को संभालें।

अधिक वेब सुविधाएं

द्विभाषीय वीडियो उपशीर्षक के अलावा, Trancy वेब पृष्ठों के लिए शब्द अनुवाद और पूर्ण-पाठ अनुवाद भी प्रदान करता है।

Shadcn Component Library Course for Beginners - द्विभाषीय उपशीर्षक

अधिक सुविधाओं को खोलें

मुख्य वीडियो प्लेटफ़ॉर्म के साथ संगत

शुरू होने के लिए तैयार