Teaser

A component for displaying newspaper article teasers.

High Summer Lunch Salad

This substantial lunch salad brings together peak summer tomatoes and pluots with protein-rich mung beans and a simple vinaigrette. Fried shallots and pistachios bring the crunch, while rings of banana pepper add a bit of kick and a pop of color!

Continue reading High Summer Lunch Salad on 101 Cookbooks

1
import {
2
  Teaser,
3
  TeaserContent,
4
  TeaserDescription,
5
  TeaserTitle,
6
} from "@/features/pxl/newspaper/teaser";
7
import type { Rss } from "@/lib/schemas/pxl/rss";
8

9
export default function TeaserDemo() {
10
  const rssItem: Rss.Item = {
11
    title: "High Summer Lunch Salad",
12
    link: "https://www.101cookbooks.com/high-summer-lunch-salad/",
13
    description:
14
      '<p>This substantial lunch salad brings together peak summer tomatoes and pluots with protein-rich mung beans and a simple vinaigrette. Fried shallots and pistachios bring the crunch, while rings of banana pepper add a bit of kick and a pop of color!</p>\n<p>Continue reading <a href="https://www.101cookbooks.com/high-summer-lunch-salad/">High Summer Lunch Salad</a> on <a href="https://www.101cookbooks.com">101 Cookbooks</a></p>',
15
    categories: [
16
      {
17
        name: "100+ Vegetarian Recipes",
18
      },
19
      {
20
        name: "260+ Vegan Recipes",
21
      },
22
      {
23
        name: "Gluten Free Recipes",
24
      },
25
      {
26
        name: "Quick Recipes",
27
      },
28
      {
29
        name: "Salad Recipes",
30
      },
31
      {
32
        name: "Side Dish Recipes",
33
      },
34
      {
35
        name: "Summer",
36
      },
37
      {
38
        name: "Whole Food Plant-Based Diet Recipes",
39
      },
40
    ],
41
    comments: "https://www.101cookbooks.com/high-summer-lunch-salad/#respond",
42
    guid: {
43
      value: "https://www.101cookbooks.com/?p=21380",
44
      isPermaLink: false,
45
    },
46
    pubDate: "Thu, 03 Sep 2026 18:51:10 +0000",
47
    dc: {
48
      creators: ["Heidi Swanson"],
49
      creator: "Heidi Swanson",
50
    },
51
    content: {
52
      encoded:
53
        '<p>Multiple times a year I look around and declare that <em>this</em> is my favorite time of year to cook.  I love it in the winter when citrus season peaks. I love it when fava beans are the brightest green with the silkiest, creamiest texture (before they go too starchy). And I love it when the pluots are sweetest and the heirloom tomatoes most concentrated.  This was the feeling I had earlier in the week when I got home from the farmers’ market with the most inspiring ingredients I’ve had in <em>years</em>. I wrote everything down in a list —lemongrass, banana peppers, fresh cranberry beans, baby romaine, etc.. — and then started daydreaming about what I might make. The first thing was this summer-maxxing lunch salad. I tapped my pantry for mung beans, whisked together a simple vinaigrette, and then assembled everything into a wildly colorful, substantial salad where every bite is a bit different. </p>\n\n\n\n<figure class="wp-block-image is-resized"><img decoding="async" src="https://images.101cookbooks.com/high-summer-lunch-salad-v2.jpg?w=620&amp;auto=format" alt="summer lunch salad with pluots, peppers, beans, tomatoes" style="width:620px;height:auto"/></figure>\n\n\n\n<h2>High Salad Lunch Salad: Ingredients</h2>\n<p>The key here is assembling peak <em>everything</em>. If the tomatoes where you are look a little sad, skip them and bump up one of the other ingredients. Or, swap in another ingredient you love &#8211; this salad is very forgiving.</p>\n<ul>\n\t<li><strong>Tomatoes:</strong> My neighbor Emily tipped me off to just how good the Green Zebra tomatoes were this week, and she was spot on. I love their concentrated flavor and beautiful lime green and yellow striped markings. Keep an eye out for heirloom tomatoes where you are, and go for the ones with the best flavor.</li>\n\t<li><strong>Pluots</strong>: I love the complexity of a perfect, ripe pluot, and while a lot of people I know wait for peach season, I&#8217;m actually team pluot. You can use either here.</li>\n\t<li><strong>Crispy Shallots</strong>: A lot of people buy these, but I like to make my own. Fry thinly sliced shallots in a good amount of oil until deeply browned, then use a spider to transfer them to a paper towel. It&#8217;s one of the assertive elements that also brings crunch and savoriness to this salad.</li>\n\t<li><strong>Banana Peppers</strong>: Keep an eye out! I love their color and mild bite and spiciness. If you can&#8217;t find them and like bell peppers, swap in some yellow or red bell peppers. Quite different, but reasonable!</li>\n\t<li><strong>Vinegar</strong>: The vinegar here is important and should taste delicious. I&#8217;ve been using a red wine vinegar that is agrodolce &#8211; a bit sweet, but still plenty acidic (<a href="https://www.katzfarm.com/collections/katz-farm/products/katz-late-harvest-zinfandel-vinegar">it&#8217;s this one</a>). If you don&#8217;t have an agrodolce vinegar, consider adding a bit of honey or sugar to your vinaigrette to round it out a bit. Just enough to get it to your liking. </li>\n</ul>\n\n\n\n<figure class="wp-block-image is-resized"><img decoding="async" src="https://images.101cookbooks.com/high-summer-lunch-salad-4.jpg?w=620&amp;auto=format" alt="ingredients for summer lunch salad from the farmers market" style="width:620px;height:auto"/></figure>\n\n\n\n<p>A few of the other ingredients and flowers that were at the market at the same time. On the ingredient front there were: perfect carrots, yellow beans, fresh cranberry beans, shallots, lemongrass, and some little lettuces hiding in there. Marigolds made an appearance after weeks and weeks of show-stopping dahlias. It&#8217;s one of the first things I notice as we round the corner into fall. </p>\n\n\n\n<figure class="wp-block-image"><img decoding="async" src="https://images.101cookbooks.com/high-summer-lunch-salad-1.jpg?w=620&amp;auto=format" alt="summer lunch salad with pluots, peppers, beans, tomatoes"/></figure>\n\n\n\n<h2>High Summer Lunch Salad: Serving Ideas</h2>\n<p>I served this salad basically as a meal on its own, with a bit of Zanzibari Sesame Flatbread from <em>The Food of Oman</em> (page 177), published in 2015. Sidenote: this is a wonderful book that <a href="https://www.instagram.com/djgnocchi/">Ken</a> at <a href="https://nowservingla.com/">Now Serving</a> turned me on to a few years back. The flatbread has a rich coconut milk dough, and I&#8217;ve been making variations of it ever since I brought the book home. It seems like the book might be out of print, but poke around for a used copy &#8211; they&#8217;re out there. I also added a little plate of sheep&#8217;s milk feta drizzled with olive oil, more of a creamy bonus than an essential. </p>\n<p>As far as drinks go, I boosted some sparkling water with lemon, a bit of saffron, and plenty of ice, then called it a day.</p>\n\n\n\n<figure class="wp-block-image is-resized"><img decoding="async" src="https://images.101cookbooks.com/high-summer-lunch-salad-3.jpg?w=620&amp;auto=format" alt="summer lunch salad with pluots, peppers, beans, tomatoes" style="width:620px;height:auto"/></figure>\n\n\n\n<h2>More Summer Salads</h2>\n<ul>\n\t<li><a href="https://www.101cookbooks.com/corn-salad/">Coconut Corn Salad</a></li>\n\t<li><a href="https://www.101cookbooks.com/cucumber-salad/">Cucumber Salad</a></li>\n\t<li><a href="https://www.101cookbooks.com/wedge-salad/"><span class="s2">Grilled Wedge Salad</span></a></li>\n\t<li><span class="s3"><a href="https://www.101cookbooks.com/roasted-tomato-salad/"><span class="s4">Roasted Tomato Salad</span></a></span></li>\n\t<li><span class="s5"><a href="https://www.101cookbooks.com/spicy-sesame-coleslaw/"><span class="s6">Spicy Sesame Coleslaw</span></a></span></li>\n\t<li><a href="https://www.101cookbooks.com/pluot-summer-salad/">Pluot Summer Salad</a></li>\n\t<li><a href="https://www.101cookbooks.com/melon-salad-recipe/">Summer Melon Salad</a></li>\n</ul>\n<h2 class="p1"><span class="s1">More Salad Recipes</span></h2>\n<ul class="ul1">\n\t<li class="li3"><span class="s2"><a href="https://www.101cookbooks.com/nicoise-salad/"><span class="s3">Nicoise Salad</span></a></span></li>\n\t<li class="li3"><span class="s2"><a href="https://www.101cookbooks.com/raw-tuscan-kale-salad/"><span class="s3">Raw Tuscan Kale Salad</span></a></span></li>\n\t<li class="li3"><span class="s2"><a href="https://www.101cookbooks.com/summer-fruit-salad/"><span class="s3">Summer Fruit Salad</span></a></span></li>\n\t<li class="li3"><span class="s2"><a href="https://www.101cookbooks.com/egg-salad/"><span class="s3">Egg Salad</span></a></span></li>\n\t<li class="li3"><span class="s2"><a href="https://www.101cookbooks.com/quinoa-salad/"><span class="s3">Quinoa Salad</span></a></span></li>\n\t<li class="li3"><span class="s2"><a href="https://www.101cookbooks.com/apple-salad/"><span class="s3">Apple Salad</span></a></span></li>\n\t<li class="li3"><span class="s4">All <a href="https://www.101cookbooks.com/salad-recipes/"><span class="s3">salad recipes</span></a></span></li>\n</ul>\n<p>Continue reading <a href="https://www.101cookbooks.com/high-summer-lunch-salad/">High Summer Lunch Salad</a> on <a href="https://www.101cookbooks.com">101 Cookbooks</a></p>',
54
    },
55
    slash: {
56
      comments: 0,
57
    },
58
    wfw: {
59
      commentRss: "https://www.101cookbooks.com/high-summer-lunch-salad/feed",
60
    },
61
  };
62

63
  return (
64
    <Teaser>
65
      <TeaserContent>
66
        <TeaserTitle.Rss item={rssItem} />
67
        <TeaserDescription.Rss item={rssItem} />
68
      </TeaserContent>
69
    </Teaser>
70
  );
71
}

pnpm dlx shadcn@latest add pxl-ui/registry/newspaper/teaser

Copy and paste the following code into your project.

1
import { cva, type VariantProps } from "class-variance-authority";
2
import { type ComponentProps, useMemo } from "react";
3

4
import type { Atom } from "@/lib/schemas/pxl/atom";
5
import type { Rdf } from "@/lib/schemas/pxl/rdf";
6
import type { Rss } from "@/lib/schemas/pxl/rss";
7
import { cn } from "@/lib/utils";
8

9
const teaserVariants = cva(
10
  "group/teaser flex w-full flex-wrap items-center text-sm transition-colors duration-100 outline-none [a]:transition-colors [a]:hover:bg-muted",
11
  {
12
    variants: {
13
      size: {
14
        default: "gap-3.5",
15
        sm: "gap-2.5",
16
        xs: "gap-2",
17
      },
18
    },
19
    defaultVariants: {
20
      size: "default",
21
    },
22
  },
23
);
24

25
function Teaser({
26
  className,
27
  size = "default",
28
  ...props
29
}: ComponentProps<"li"> & VariantProps<typeof teaserVariants>) {
30
  return (
31
    <li
32
      className={cn(teaserVariants({ size }))}
33
      data-slot="teaser"
34
      data-size={size}
35
      {...props}
36
    />
37
  );
38
}
39

40
function TeaserContent({ className, ...props }: ComponentProps<"div">) {
41
  return (
42
    <div
43
      data-slot="teaser-content"
44
      className={cn(
45
        "flex flex-1 flex-col gap-1",
46
        "@container inline-block max-w-[-webkit-fill-available]",
47
        className,
48
      )}
49
      {...props}
50
    />
51
  );
52
}
53

54
function TeaserTitle({ className, ...props }: ComponentProps<"div">) {
55
  return (
56
    <div
57
      data-slot="teaser-title"
58
      className={cn(
59
        "line-clamp-1 flex w-fit items-center gap-2 leading-snug underline-offset-4 px-px",
60
        "font-serif font-bold text-xs @5xs:text-sm @md:text-base",
61
        className,
62
      )}
63
      {...props}
64
    />
65
  );
66
}
67

68
function TeaserDescription({ className, ...props }: ComponentProps<"div">) {
69
  return (
70
    <div
71
      data-slot="teaser-description"
72
      className={cn(
73
        "relative px-px",
74
        "max-h-20 overflow-y-auto scrollbar-gutter-stable scrollbar-thin",
75
        "scrollbar-thumb-transparent group-hover/teaser:scrollbar-thumb-border",
76
        "font-serif font-normal text-left text-muted-foreground",
77
        "text-2xs leading-normal @5xs:text-xs @md:text-sm",
78
        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
79
        className,
80
      )}
81
      {...props}
82
    />
83
  );
84
}
85

86
function AtomTeaserTitle({
87
  entry,
88
  ...props
89
}: ComponentProps<typeof TeaserTitle> & { entry: Atom.Entry }) {
90
  const title = useMemo(() => {
91
    const group = entry.media?.groups?.find((g) => g.title?.value);
92

93
    return group?.title?.value ?? entry.title;
94
  }, [entry]);
95

96
  return <TeaserTitle {...props}>{title}</TeaserTitle>;
97
}
98
TeaserTitle.Atom = AtomTeaserTitle;
99

100
function AtomTeaserDescription({
101
  entry,
102
  ...props
103
}: ComponentProps<typeof TeaserDescription> & { entry: Atom.Entry }) {
104
  const description = useMemo(() => {
105
    const group = entry.media?.groups?.find((g) => g.description?.value);
106

107
    return group?.description?.value ?? entry.content;
108
  }, [entry]);
109

110
  if (!description) {
111
    return null;
112
  }
113

114
  return (
115
    <TeaserDescription
116
      {...props}
117
      // biome-ignore lint/security/noDangerouslySetInnerHtml: feed content
118
      dangerouslySetInnerHTML={{
119
        __html: description,
120
      }}
121
    />
122
  );
123
}
124
TeaserDescription.Atom = AtomTeaserDescription;
125

126
function RdfTeaserTitle({
127
  item,
128
  ...props
129
}: ComponentProps<typeof TeaserTitle> & { item: Rdf.Item }) {
130
  const title = useMemo(() => {
131
    return item.title ?? "";
132
  }, [item]);
133

134
  return <TeaserTitle {...props}>{title}</TeaserTitle>;
135
}
136
TeaserTitle.Rdf = RdfTeaserTitle;
137

138
function RdfTeaserDescription({
139
  item,
140
  ...props
141
}: ComponentProps<typeof TeaserDescription> & { item: Rdf.Item }) {
142
  const description = useMemo(() => {
143
    return item.content?.encoded ?? item.description;
144
  }, [item]);
145

146
  return (
147
    description && (
148
      <TeaserDescription
149
        {...props}
150
        // biome-ignore lint/security/noDangerouslySetInnerHtml: feed content
151
        dangerouslySetInnerHTML={{
152
          __html: description,
153
        }}
154
      />
155
    )
156
  );
157
}
158
TeaserDescription.Rdf = RdfTeaserDescription;
159

160
function RssTeaserTitle({
161
  item,
162
  ...props
163
}: ComponentProps<typeof TeaserTitle> & { item: Rss.Item }) {
164
  const title = useMemo(() => {
165
    return item.title ?? "";
166
  }, [item]);
167

168
  return <TeaserTitle {...props}>{title}</TeaserTitle>;
169
}
170
TeaserTitle.Rss = RssTeaserTitle;
171

172
function RssTeaserDescription({
173
  item,
174
  ...props
175
}: ComponentProps<typeof TeaserDescription> & { item: Rss.Item }) {
176
  const description = useMemo(() => {
177
    return item.itunes?.summary ?? item.description;
178
  }, [item]);
179

180
  if (!description) {
181
    return null;
182
  }
183

184
  return (
185
    <TeaserDescription
186
      {...props}
187
      // biome-ignore lint/security/noDangerouslySetInnerHtml: feed content
188
      dangerouslySetInnerHTML={{
189
        __html: description,
190
      }}
191
    />
192
  );
193
}
194
TeaserDescription.Rss = RssTeaserDescription;
195

196
export {
197
  Teaser,
198
  TeaserContent,
199
  TeaserDescription,
200
  TeaserTitle,
201
};

Update the import paths to match your project setup.

Usage

import {
  Teaser,
  TeaserContent,
  TeaserDescription ,
  TeaserTitle,
} from "@/components/features/pxl/newspaper/teaser";

<Teaser>
  <TeaserContent>
    <TeaserTitle.Rss item={item} />
    <TeaserDescription.Rss item={item} />
  </TeaserContent>
</Teaser>