Menu
Blog 32
<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="grid gap-x-8 gap-y-6 md:grid-cols-[.5fr_1fr] md:gap-x-10 md:gap-y-4">
<a href="#" class="w-full"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image"
class="aspect-square w-full object-cover"
/></a>
<div class="flex h-full flex-col items-start justify-center">
<div class="rb-4 mb-4 flex w-full items-center justify-start">
<p class="mr-4 bg-background-secondary px-2 py-1 text-sm font-semibold">Category</p>
<p class="inline text-sm font-semibold">5 min read</p>
</div>
<div class="flex w-full flex-col items-start justify-start">
<a class="mb-2" href="#"
><h3 class="text-xl font-bold md:text-2xl">Blog title heading will go here</h3></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius
enim...
</p>
<button
class="focus-visible:ring-border-primary whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 text-text-primary gap-2 p-0 mt-6 flex items-center justify-center gap-x-2"
title="Read more"
>
Read more<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
</div>
<div class="grid gap-x-8 gap-y-6 md:grid-cols-[.5fr_1fr] md:gap-x-10 md:gap-y-4">
<a href="#" class="w-full"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image"
class="aspect-square w-full object-cover"
/></a>
<div class="flex h-full flex-col items-start justify-center">
<div class="rb-4 mb-4 flex w-full items-center justify-start">
<p class="mr-4 bg-background-secondary px-2 py-1 text-sm font-semibold">Category</p>
<p class="inline text-sm font-semibold">5 min read</p>
</div>
<div class="flex w-full flex-col items-start justify-start">
<a class="mb-2" href="#"
><h3 class="text-xl font-bold md:text-2xl">Blog title heading will go here</h3></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius
enim...
</p>
<button
class="focus-visible:ring-border-primary whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 text-text-primary gap-2 p-0 mt-6 flex items-center justify-center gap-x-2"
title="Read more"
>
Read more<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
</div>
<div class="grid gap-x-8 gap-y-6 md:grid-cols-[.5fr_1fr] md:gap-x-10 md:gap-y-4">
<a href="#" class="w-full"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image"
class="aspect-square w-full object-cover"
/></a>
<div class="flex h-full flex-col items-start justify-center">
<div class="rb-4 mb-4 flex w-full items-center justify-start">
<p class="mr-4 bg-background-secondary px-2 py-1 text-sm font-semibold">Category</p>
<p class="inline text-sm font-semibold">5 min read</p>
</div>
<div class="flex w-full flex-col items-start justify-start">
<a class="mb-2" href="#"
><h3 class="text-xl font-bold md:text-2xl">Blog title heading will go here</h3></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius
enim...
</p>
<button
class="focus-visible:ring-border-primary whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 text-text-primary gap-2 p-0 mt-6 flex items-center justify-center gap-x-2"
title="Read more"
>
Read more<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
"use client";
import { useState } from "react";
import { Button, Select, SelectTrigger, SelectContent, SelectItem } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
import { AnimatePresence, motion } from "framer-motion";
import { RxChevronRight } from "react-icons/rx";
type ImageProps = {
src: string;
alt?: string;
};
type BlogPost = {
url: string;
image: ImageProps;
category: string;
readTime: string;
title: string;
description: string;
button: ButtonProps;
};
type BlogSelect = {
value: string;
trigger: string;
content: BlogPost[];
};
type Props = {
tagline: string;
heading: string;
description: string;
defaultValue: string;
selects: BlogSelect[];
};
export type Blog32Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Blog32 = (props: Blog32Props) => {
const { tagline, heading, description, selects, defaultValue } = {
...Blog32Defaults,
...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="grid gap-x-8 gap-y-6 md:grid-cols-[.5fr_1fr] md:gap-x-10 md:gap-y-4"
>
<a href={post.url} className="w-full">
<img
src={post.image.src}
alt={post.image.alt}
className="aspect-square w-full object-cover"
/>
</a>
<div className="flex h-full flex-col items-start justify-center">
<div className="rb-4 mb-4 flex w-full items-center justify-start">
<p className="mr-4 bg-background-secondary px-2 py-1 text-sm font-semibold">
{post.category}
</p>
<p className="inline text-sm font-semibold">{post.readTime}</p>
</div>
<div className="flex w-full flex-col items-start justify-start">
<a className="mb-2" href={post.url}>
<h3 className="text-xl font-bold md:text-2xl">{post.title}</h3>
</a>
<p>{post.description}</p>
<Button
{...post.button}
className="mt-6 flex items-center justify-center gap-x-2"
>
{post.button.title}
</Button>
</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...",
button: {
title: "Read more",
variant: "link",
size: "link",
iconRight: <RxChevronRight />,
},
};
export const Blog32Defaults: 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)
