Shareholder Reports Carousel This component displays a collection of reports in a horizontally scrollable carousel. It features navigation arrows that appear contextually based on the scroll position, providing a clean and intuitive user experience. The component is fully responsive, theme-adaptive, and built to be easily populated with data via props.
import { ShareholderReports, Report } from "@/components/ui/carousel";
// Sample data for the reports
const reportsData: Report[] = [
{
id: "q1fy26",
quarter: "Q1FY26",
period: "Q4FY26 | JULY 20, 2025",
imageSrc: "https://cdn.21st.dev/assets/mirror/09/09dd30283619658f20071b88376914aa0f195f990389f093cc2290a81950183b.jpg",
isNew: true,
},
{
id: "q4fy25",
quarter: "Q4FY25",
period: "Q4FY25 | MAY 1, 2025",
imageSrc: "https://cdn.21st.dev/assets/mirror/03/03c17db56f1af15591b3ed3b2ecef910622e552f7a2cb08b56e60a0acf56f30f.jpg",
},
{
id: "q3fy25",
quarter: "Q3FY25",
period: "Q3FY25 | JANUARY 20, 2025",
imageSrc: "https://cdn.21st.dev/assets/mirror/ab/aba76720adfe9abcd3b4bbb3bc49c699e00ef73ecaf57c23154764fd2237da2a.jpg",
},
{
id: "q2fy25",
quarter: "Q2FY25",
period: "Q2FY25 | OCTOBER 15, 2024",
imageSrc: "https://cdn.21st.dev/assets/mirror/5d/5dd8332334723f45e431219c079b1b4a2a151078a36c7096a1b2e4eeeaf8cc85.jpg",
},
{
id: "q1fy25",
quarter: "Q1FY25",
period: "Q1FY25 | JULY 18, 2024",
imageSrc: "https://cdn.21st.dev/assets/mirror/73/73993a1ee2e8054b56f4b4cd0555ff771fde495c8c17d469c351f0a26d0b3605.jpg",
},
];
// Demo component to showcase the ShareholderReports
export default function ShareholderReportsDemo() {
return (
<div className="w-full bg-background">
<ShareholderReports reports={reportsData} />
</div>
);
}