CommunityGridCell

The CommunityGridCell component is designed to highlight community stories or events, featuring a distinctive style with an icon, title, description, and a link.

Usage

CommunityGridCell Basic Usage

import React from 'react';
import { CommunityGridCell } from '~/ui/components/Home';
import { Users2Icon } from "lucide-react";

export default function App() {
  return (
    <CommunityGridCell
      icon={<Users2Icon />}
      iconBackground="lightgray"
      title="Join Our Community"
      description="Connect with like-minded individuals."
      link="https://community.example.com"
    />
  );
}

Rendered Example

Community Meetups

Regular meetups and events.

Community Meetups

Regular meetups and events.

Props

Name	Type	Default	Description
icon	JSX.Element	`undefined`	Icon to display at the beginning of the cell
iconBackground	string	`lightgray`	Background color of the icon container
title	string	`undefined`	Title of the community story or event
link	string	`undefined`	URL to link to more community details
description	string	`undefined`	Brief description of the community story or event
className	string	`undefined`	Additional CSS classes for styling
md	number	`6`	Columns span on medium screens
shouldLeakReferrer	boolean	`undefined`	Specifies if the referrer policy should allow URL leakage