Building a News Site - Article Preview

[00:00 - 00:08] In the previous lesson, you've created the category page. Now in this lesson, you will learn how to use the shadcNUI sheet component to display an article preview.

[00:09 - 00:19] Since the API doesn't provide the full article content, you can let user preview the content coming back from the API. The best way to do it is with shadcNUI sheet component.

[00:20 - 00:36] Let's install it via the CLI. [silence] Now create a new component called article_link.

[00:37 - 00:56] Let's render the content of the article inside of it. The component will wrap the article title with a sheet trigger, and on a click it will open everything under the sheet_content component.

[00:57 - 01:03] So let's see it in action. We need to define a component as a clad component using the use_client directive.

[01:04 - 01:13] And then we're going to import the react node, which is a type for react children. We're going to import the link component from next.js.

[01:14 - 01:38] We're going to import the article type from our types. And we're going to import the article image that you should be familiar with the top headline component.

[01:39 - 02:21] [silence] And import the sheet_sheet_content, sheet_description, footer, header, title, and trigger components from /ui/components/ui/sheet. The last item will be the paragraph component from the typography components list.

[02:22 - 02:33] So, export const article_link = a component which receives both an article and children. And we can type them as well.

[02:34 - 02:49] And the component can simply return JS6. So wrap it with a sheet and render a sheet trigger.

[02:50 - 03:01] The trigger will render any children of the article link link component. So anything under this, for example, open me, will be rendered.

[03:02 - 03:15] We want to add a class name, text left, hover text orange 700, because this is the link behavior. And then we want to render a sheet_content.

[03:16 - 03:31] It will be with the grid, gap4, and padding top16 class name. And inside the sheet we want to render and header a title that will render the article title as well.

[03:32 - 03:40] You can make it large with the text_accel class name. Then the sheet description which will be the article description.

[03:41 - 03:54] And we want to render a div with the article image. And a title.

[03:55 - 04:10] And a paragraph with the article content returned from the API. We also need to pass a ratio.

[04:11 - 04:16] And we're going to make it tall. Now the last part will be the sheet footer.

[04:17 - 04:23] She's part of the sheet content. And we're going to render a link with an hre to the article URL.

[04:24 - 04:31] And we're going to add an underline to this. And we're going to ask users to click if they want to read more.

[04:32 - 04:36] Perfect. Now let's wrap the components that we already created with an article link.

[04:37 - 04:50] Let's start with the top headline. [silence] It should receive an article.

[04:51 - 04:57] And we can format it. Then let's go to latest articles.

[04:58 - 05:06] Each article can be wrapped with an article link. And the key should go now to the article link component.

[05:07 - 05:16] [silence] And inside the article preview. We can wrap the article details.

[05:17 - 05:34] Or we can actually wrap the full component as well. [silence] Okay.

[05:35 - 05:38] Now let's preview that. Go to the browser, make sure your server is running.

[05:39 - 05:45] And try to click on one of the articles. You can also see that the cursor became a point though.

[05:46 - 05:48] Once we go, hover this. And now you've opened the sheet.

[05:49 - 06:14] And you can see the article details and article content inside. [ Tapping ]