In this lesson, you will learn how to use 

Since the API doesn't provide the full article content, you can let users preview the content.

---
title: Building a News Site - Article Preview
description: Create the article preview for NEWSLY, a shadcn/ui news site
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-sleek-web-applications-with-shadcn-ui-app/-/tree/main/newsly/03.08-article?ref_type=heads
privateVideoUrl: https://stream.mux.com/z01GQptA57y8PeBMoL1u16CTAmC83vdwOoHV6Mty1gSk.m3u
---

In this lesson, you will learn how to use `shadcn/ui` `Sheet` component.

Since the API doesn't provide the full article content, you can let users preview the content.

The best way to do it is with `shadcn/ui` [`Sheet`](https://ui.shadcn.com/docs/components/sheet) component.

Install it via `shadcn/ui` CLI:

```bash
  npx shadcn-ui@latest add sheet
```

### The `ArticleLink` Component

Create a new component called `ArticleLink` in `components/article-link`, and add the following to it:

```javascript { actualFilename=../../code/newsly/03.08-article/components/article-link.tsx endChar=1146 endLine=49 startChar=0 startLine=1 statedFilename=components/article-link.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_03/lesson_03.08/.../code/newsly/03.08-article/components/article-link.tsx }
"use client"

import { ReactNode } from "react"
import Link from "next/link"

import { Article } from "@/types/article"

import { ArticleImage } from "./article-image"
import { TopHeadline } from "./top-headline"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "./ui/sheet"
import { Paragraph } from "./ui/typography"

export const ArticleLink = ({
  article,
  children,
}: {
  article: Article
  children: ReactNode
}) => (
  <Sheet>
    <SheetTrigger className="text-left hover:text-orange-700">
      {children}
    </SheetTrigger>
    <SheetContent className="grid gap-4 pt-16">
      <SheetHeader>
        <SheetTitle className="text-xl">{article.title}</SheetTitle>
        <SheetDescription>{article.description}</SheetDescription>
      </SheetHeader>
      <div>
        <ArticleImage src={article.urlToImage} title={article.title} />
        <Paragraph>{article.content}</Paragraph>
      </div>
      <SheetFooter>
        <Link href={article.url} className="underline">
          Read More
        </Link>
      </SheetFooter>
    </SheetContent>
  </Sheet>
)
```

Wrap `TopHeadline`, `LatestArticles`, and `ArticlePreview` with `ArticleLink`:

```javascript { actualFilename=../../code/newsly/03.08-article/components/top-headline.tsx endLine=31 startLine=10 statedFilename=components/top-headline.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_03/lesson_03.08/.../code/newsly/03.08-article/components/top-headline.tsx#L10 }
export const TopHeadline = ({ article }: { article: Article }) => {
  return (
    <ArticleLink article={article}>
      <div className="grid w-full grid-rows-1 items-start gap-4 md:grid-cols-[0.35fr_0.65fr] md:gap-8">
        <div className="relative w-full md:h-full">
          <ArticleImage
            title={article.title}
            src={article.urlToImage}
            ratio="tall"
          />
        </div>
        <div className="flex w-full flex-col gap-4 px-4 lg:px-0">
          <H1>{article.title}</H1>
          <span className="block text-sm text-orange-700 md:text-base">
            {article.author} | {dayjs(article.publishedAt).format("HH:mm")}
          </span>
          <Lead>{article.description}</Lead>
        </div>
      </div>
    </ArticleLink>
  )
}
```

Eyal Cohen

Create the article preview for NEWSLY, a shadcn/ui news site

Building a News Site - Article Preview

In the previous lesson, you've created the category page.

Now in this lesson, you will learn how to use the shadcn/ui sheet component to

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 shadcn/ui sheet component.

Now create a new component called article-link.

Let's render the content of the article inside of it.

The component will wrap the article title with the sheet_rigger

and on the click it will open everything under the sheet_content component.

We need to define a component as a client component using the use client

And then we're going to import the react node,

We're going to import the link component from next.

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.

And import the Sheet, SheetContent, SheetDescription,

footer, header, title, and trigger components from

The last item will be the paragraph component from the typography

So, expert const ArticleLink = a component which receives both an article and

So wrap it with a sheet and render a sheet_rigger.

The trigger will render any children of the article link component.

So anything under this, for example, open me, will be rendered.

Sorry, text left, hover text orange 700, because this is the link behavior.

And then we want to render a SheetContent.

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

You can make it large with the text-xl class name.

Then the sheet description, which will be the article description.

And we want to render a div with the article image.

And a paragraph with the article content returned from the API.

Now the last part will be the sheet_footer.

And we're going to render a link with an href to the article URL.

And we're going to add an underline to this.

And we're going to ask users to click it if they want to read more.

Perfect. Now let's wrap the components that we already created with an article

Each article can be wrapped with an article link.

And the key should go now to the article link component.

Or we can actually wrap the full component as well.

Okay. Now let's preview the go to the browser, make sure the server is running.

You can also see that the cursor became a point though, once we go over this.

And now you've opened the sheet and you can see the article details and article

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript