Component
Important things
- To create your section, you should do it in "sections" folder
- You file name should follow the same case you configure for "sectionFileCase" in
kiwi.config.jsfile - Your props interface should be named following this pattern:
[SectionName]Props - You should export you Component as default and export props interface
sections/top-notification.tsx
import { RichText, RichTextComponent } from '@kiwi-app/nextjs';
export interface TopNotificationProps {
/** @description this description will be displayed on kiwi admin */
title: RichText;
}
export default function TopNotification(props: TopNotificationProps) {
return (
<div className="py-2 w-full bg-primary">
<div className="flex items-center justify-center">
<RichTextComponent
className="text-xs font-bold font-heading text-white"
text={props.title}
/>
</div>
</div>
);
}
Client-side
- If you want your section execute a client-side code, use this section as an "entrypoint" then create another component with "use client" directive to do what you want.
sections/using-redux.tsx
import UsingReduxComponent from '@/components/using-redux-component';
export default function UsingRedux() {
return <UsingReduxComponent />;
}
components/using-redux-component.tsx
'use client';
import { updateCount } from '@/store/kiwi-slice';
import { RootState } from '@/store/store';
import { useDispatch, useSelector } from 'react-redux';
export default function UsingReduxComponent() {
const dispatch = useDispatch();
const { count } = useSelector((state: RootState) => state.kiwi);
const handleOnClick = () => {
const random = Math.floor(Math.random() * 11);
dispatch(updateCount(random));
};
return (
<div>
<h2>Count: {count}</h2>
<button onClick={handleOnClick}>Update state</button>
</div>
);
}