Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Help : Custom block component using Qwik , Builder.io #3206

Open
akshays-repo opened this issue Apr 16, 2024 · 0 comments
Open

Help : Custom block component using Qwik , Builder.io #3206

akshays-repo opened this issue Apr 16, 2024 · 0 comments
Labels

Comments

@akshays-repo
Copy link

akshays-repo commented Apr 16, 2024

HI i want to create a grid responsive grid element using qwik and Tailwind

responsive-grid-layout.tsx

import { component$, Slot, } from '@builder.io/qwik';
import { Blocks } from '@builder.io/sdk-qwik';


export default component$((props) => {

    return <div>

        <div class='w-full max-w-screen-xl'>

            <div class="grid grid-cols-1 text-white md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4  place-items-center place-content-center">
                {[1, 2, 3, 4].map((i) => <div class='mb-5' key={i}>

                    <Blocks

                    /> 
               </div>
                )}
            </div>
        </div>
    </div>
});

builder-registry.ts

import type { RegisteredComponent } from "@builder.io/sdk-qwik";
import Header from "./core/header/header";
import HeroBanner from "./core/hero-banner/hero-banner";
import ResponsiveGridLayout from "./layout/responsive-grid-layout/responsive-grid-layout";

export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
    {
        component: Header,
        name: 'Header',
      },
      {
        component: ResponsiveGridLayout,
        name: 'ResponsiveGridLayout',
      },
      {
        component: HeroBanner,
        name: 'HeroBanner',
        inputs: [
          {
            name: "subTitle",
            type: "string",
          },
          {
            name: "title",
            type: "string",
          },
          {
            name: "backgroundImageURL",
            type: "string",
          },
        ],
      },

];

my code is incomplete how can I achieve this use case

image

when i try to place something inside this block its not working for me

@github-actions github-actions bot added the Stale label Jul 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant