Menu
Blog 29
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container flex max-w-lg flex-col">
<div class="mb-12 text-center md:mb-18 lg:mb-20">
<div class="w-full max-w-lg">
<p class="mb-3 font-semibold md:mb-4">Blog</p>
<h1 class="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl">
Short heading goes here
</h1>
<p class="md:text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="flex flex-col justify-start">
<div class="md:min-w- mb-10">
<button
type="button"
role="combobox"
aria-controls="radix-:R6:"
aria-expanded="false"
aria-autocomplete="none"
dir="ltr"
data-state="closed"
class="flex min-h-11 w-full items-center justify-between gap-1 whitespace-nowrap border border-border-primary bg-transparent text-text-primary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&[data-state=open]>svg]:rotate-180 min-w-[12.5rem] px-4 py-2 md:w-auto"
>
All Posts<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
class="size-5 transition-transform duration-300"
aria-hidden="true"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
fill="currentColor"
></path>
</svg></button
><select
aria-hidden="true"
tabindex="-1"
style="
position: absolute;
border: 0;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
word-wrap: normal;
"
></select>
</div>
<div style="opacity: 0">
<div class="grid grid-cols-1 gap-x-12 gap-y-12 md:gap-y-16">
<div class="flex flex-col border border-border-primary">
<a href="#" class="inline-block w-full max-w-full overflow-hidden"
><div class="w-full overflow-hidden">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image"
class="aspect-video size-full object-cover"
/></div
></a>
<div class="px-5 py-6 md:px-6">
<a href="#" class="mb-2 mr-4 inline-block max-w-full text-sm font-semibold"
>Category</a
><a href="#" class="mb-2 block max-w-full"
><h5 class="text-2xl font-bold md:text-4xl">Blog title heading will go here</h5></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in
eros.
</p>
<div class="mt-6 flex items-center">
<div class="mr-4 shrink-0">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder avatar"
class="size-12 min-h-12 min-w-12 rounded-full object-cover"
/>
</div>
<div>
<h6 class="text-sm font-semibold">Full name</h6>
<div class="flex items-center">
<p class="text-sm">11 Jan 2022</p>
<span class="mx-2">•</span>
<p class="text-sm">5 min read</p>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col border border-border-primary">
<a href="#" class="inline-block w-full max-w-full overflow-hidden"
><div class="w-full overflow-hidden">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image"
class="aspect-video size-full object-cover"
/></div
></a>
<div class="px-5 py-6 md:px-6">
<a href="#" class="mb-2 mr-4 inline-block max-w-full text-sm font-semibold"
>Category</a
><a href="#" class="mb-2 block max-w-full"
><h5 class="text-2xl font-bold md:text-4xl">Blog title heading will go here</h5></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in
eros.
</p>
<div class="mt-6 flex items-center">
<div class="mr-4 shrink-0">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder avatar"
class="size-12 min-h-12 min-w-12 rounded-full object-cover"
/>
</div>
<div>
<h6 class="text-sm font-semibold">Full name</h6>
<div class="flex items-center">
<p class="text-sm">11 Jan 2022</p>
<span class="mx-2">•</span>
<p class="text-sm">5 min read</p>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col border border-border-primary">
<a href="#" class="inline-block w-full max-w-full overflow-hidden"
><div class="w-full overflow-hidden">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image"
class="aspect-video size-full object-cover"
/></div
></a>
<div class="px-5 py-6 md:px-6">
<a href="#" class="mb-2 mr-4 inline-block max-w-full text-sm font-semibold"
>Category</a
><a href="#" class="mb-2 block max-w-full"
><h5 class="text-2xl font-bold md:text-4xl">Blog title heading will go here</h5></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in
eros.
</p>
<div class="mt-6 flex items-center">
<div class="mr-4 shrink-0">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder avatar"
class="size-12 min-h-12 min-w-12 rounded-full object-cover"
/>
</div>
<div>
<h6 class="text-sm font-semibold">Full name</h6>
<div class="flex items-center">
<p class="text-sm">11 Jan 2022</p>
<span class="mx-2">•</span>
<p class="text-sm">5 min read</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
"use client";
import { useState } from "react";
import { Select, SelectTrigger, SelectContent, SelectItem } from "@relume_io/relume-ui";
import { AnimatePresence, motion } from "framer-motion";
type ImageProps = {
src: string;
alt?: string;
};
type BlogPost = {
url: string;
image: ImageProps;
category: string;
readTime: string;
title: string;
description: string;
avatar: ImageProps;
fullName: string;
date: string;
};
type BlogSelect = {
value: string;
trigger: string;
content: BlogPost[];
};
type Props = {
tagline: string;
heading: string;
description: string;
defaultValue: string;
selects: BlogSelect[];
};
export type Blog29Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Blog29 = (props: Blog29Props) => {
const { tagline, heading, description, selects, defaultValue } = {
...Blog29Defaults,
...props,
};
const [activeSelect, setActiveSelect] = useState<string>(defaultValue);
const currentSelect = selects.find((select) => select.value === activeSelect);
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container flex max-w-lg flex-col">
<div className="mb-12 text-center md:mb-18 lg:mb-20">
<div className="w-full max-w-lg">
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
<h1 className="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl">{heading}</h1>
<p className="md:text-md">{description}</p>
</div>
</div>
<div className="flex flex-col justify-start">
<div className="md:min-w- mb-10">
<Select value={activeSelect} onValueChange={setActiveSelect}>
<SelectTrigger className="min-w-[12.5rem] px-4 py-2 md:w-auto">
{currentSelect ? currentSelect.trigger : "Select Category"}
</SelectTrigger>
<SelectContent>
{selects.map((select, index) => (
<SelectItem key={index} value={select.value}>
{select.trigger}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<AnimatePresence mode="wait">
{currentSelect && (
<motion.div
key={currentSelect.value}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2, ease: "easeInOut" }}
>
<div className="grid grid-cols-1 gap-x-12 gap-y-12 md:gap-y-16">
{currentSelect.content.map((post, index) => (
<div
key={index}
className="flex
flex-col border border-border-primary"
>
<a href={post.url} className="inline-block w-full max-w-full overflow-hidden">
<div className="w-full overflow-hidden">
<img
src={post.image.src}
alt={post.image.alt}
className="aspect-video size-full object-cover"
/>
</div>
</a>
<div className="px-5 py-6 md:px-6">
<a
href={post.url}
className="mb-2 mr-4 inline-block max-w-full text-sm font-semibold"
>
{post.category}
</a>
<a href={post.url} className={"mb-2 block max-w-full"}>
<h5 className="text-2xl font-bold md:text-4xl">{post.title}</h5>
</a>
<p>{post.description}</p>
<div className="mt-6 flex items-center">
<div className="mr-4 shrink-0">
<img
src={post.avatar.src}
alt={post.avatar.alt}
className="size-12 min-h-12 min-w-12 rounded-full object-cover"
/>
</div>
<div>
<h6 className="text-sm font-semibold">{post.fullName}</h6>
<div className="flex items-center">
<p className="text-sm">{post.date}</p>
<span className="mx-2">•</span>
<p className="text-sm">{post.readTime}</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</motion.div>
)}
</AnimatePresence>
</div>
</div>
</section>
);
};
const blogPost: BlogPost = {
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
alt: "Relume placeholder image",
},
category: "Category",
readTime: "5 min read",
title: "Blog title heading will go here",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
avatar: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder avatar",
},
fullName: "Full name",
date: "11 Jan 2022",
};
export const Blog29Defaults: Props = {
tagline: "Blog",
heading: "Short heading goes here",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
selects: [
{
value: "all-posts",
trigger: "All Posts",
content: [blogPost, blogPost, blogPost],
},
{
value: "category-one",
trigger: "Category one",
content: [blogPost, blogPost, blogPost],
},
{
value: "category-two",
trigger: "Category two",
content: [blogPost, blogPost, blogPost],
},
{
value: "category-three",
trigger: "Category three",
content: [blogPost, blogPost, blogPost],
},
{
value: "category-four",
trigger: "Category four",
content: [blogPost, blogPost, blogPost],
},
],
defaultValue: "all-posts",
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
