feat: add BentoGrid component with responsive grid layout and styles

[lightyfr]

This pull request introduces a new BentoGrid component to the once-ui library. The changes include the implementation of the component in TypeScript, the corresponding styles in SCSS, and updates to the component exports.

New Component Addition:

• src/once-ui/components/BentoGrid.tsx: Added the BentoGrid component, which uses a easily changeable grid layout to arrange its children. The component supports custom grid layouts through the GridLayout interface and applies various styles and animations.
• src/once-ui/components/BentoGrid.module.scss: Added styles for the BentoGrid component, including grid layout properties, item styling, hover effects, and responsive adjustments for smaller screens.

Export Updates:

• src/once-ui/components/index.ts: Updated the exports to include the new BentoGrid component.

Usage

Use with nested flex components.

Ex:

          <BentoGrid layout={layout}>
            <Flex width="xs" height="xs" paddingX="4">
            </Flex>
            <Flex width="xs" fillHeight direction="column" paddingX="s">
            </Flex>
            <Flex fillWidth alignItems="right" direction="column" paddingY="8">
            </Flex>
            <Flex width="xs" height="xs" paddingX="4">
            </Flex>
            <Flex width="xs" paddingX="4">
            </Flex>
            <Flex width={82} height="xs" direction="column" gap="8" padding="8">
            </Flex>
          </BentoGrid>

The layout prop

Used to set dynamic layout of grid

  const layout = [
    { columnSpan: 4, rowSpan: 1 }, // Large item spanning 4 columns and 1 rows
    { columnSpan: 1, rowSpan: 2 }, // Medium item spanning 1 column and 2 rows
    { columnSpan: 2, rowSpan: 1 }, // Wide item spanning 2 columns
    { columnSpan: 3, rowSpan: 1 }, // Spans 3 columns and 1 row
    { columnSpan: 1, rowSpan: 1 }, // Regular item
    { columnSpan: 2, rowSpan: 1 }, // Spans 2 columns and 1 row
  ];

Results from those code snippets:

Examples:

Current example from Pyupil using those code snippets

Older Pyupil example, Link: Older Pyupil Website

Additional Examples:

(sorry i was too lazy to fix spacing inside each box i just altered the layout prop)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
once-ui-starter	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 7, 2024 5:13am

[lightyfr]

Additions

Gap Prop

Adjusts gap between children

Padding Prop

Adjusts the padding of all children

[lorant-one]

oh man that's awesome! that's definitely coming with us in the 0.5 release!