= ({
navItems,
primaryBtn,
secondaryBtn,
customization,
}) => {
// Component implementation details would go here
return (
{/* Navbar content rendering logic */}
);
};
export default NavbarContent8;
```
--------------------------------
### Example of 'plans' keyword
Source: https://phoenixcoded.gitbook.io/saasable/ui-kit/development/components/pricing/pricing1
Highlights the usage of the 'plans' keyword, likely used to denote a section or variable related to pricing plans. This aids in semantic understanding of the code.
```html
plans
```
--------------------------------
### Button Configuration Example
Source: https://phoenixcoded.gitbook.io/saasable/ui-kit/development/components/topoffer/topoffer2
This example demonstrates a configuration object for a primary button. It includes the button's text ('Subscribe'), an associated click handler function ('handleSubscribe'), and specifies the button's variant as 'contained'.
```javascript
{ text: 'Subscribe', onClick: handleSubscribe, variant: 'contained' }
```
--------------------------------
### Detect Cloudflare Misconfiguration Error in JavaScript
Source: https://phoenixcoded.gitbook.io/saasable/ui-kit/development/components/blog/blog1
This JavaScript code checks if 'rocket-loader.min.js' is present in the page's scripts. If found, it injects an error message into the DOM, alerting the user to a potential Cloudflare misconfiguration on the site. This helps identify and guide users to fix common Cloudflare setup issues.
```javascript
document.addEventListener("DOMContentLoaded", () => {
if (Array.from(document.scripts).find(script => script.src.includes('rocket-loader.min.js'))) {
const alert = document.createElement('div');
alert.className = 'p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 mt-8 mx-8';
alert.innerHTML = ` Error in site configuration: It looks like ${window.location.hostname} has been incorrectly configured in Cloudflare. This may lead to unexpected behavior or issues with the page loading. If you are the owner of this site, please refer to GitBook's documentation for steps to fix the problem. `;
document.body.prepend(alert);
}
});
```
--------------------------------
### Hero11 Component Usage (TypeScript)
Source: https://phoenixcoded.gitbook.io/saasable/ui-kit/development/components/hero/hero11
Example of how to use the Hero11 component in a React application. It demonstrates passing various props to configure the headline, caption, review data, buttons, helper text, images, benefit statistics, and slider content. This setup utilizes MUI for styling and responsive design.
```typescript
import Hero11 from 'src/blocks/hero/Hero11';
import { BenefitDataProps, ListDataProps } from 'src/types';
import { ButtonProps } from '@mui/material';
// Example data for the component
const headlineText: string = "Effortless CRM Management, Seamless Business Growth";
const captionText: string = "Discover innovative solutions tailored to your needs.";
const reviewInfo = {
avatarList: ["/avatars/user1.jpg", "/avatars/user2.jpg"],
rating: 4.5,
totalReviews: "150 reviews"
};
const primaryButtonProps: ButtonProps = {
variant: "contained",
color: "primary",
children: "Subscribe Now"
};
const helper: string = "Stay updated with our latest news.";
const mainImage = {
light: '/images/hero/hero11-light.png',
dark: '/images/hero/hero11-dark.png'
};
const benefitStats: {
data1: BenefitDataProps,
data2: BenefitDataProps
} = {
data1: { counter: "50+", caption: "Projects Completed", defaultUnit: "+" },
data2: { counter: "20", caption: "Years of Experience" }
};
const sliderTitleText: string = "Our Key Features";
const sliderItems: ListDataProps[] = [
{ icon: "/icons/star.svg", title: "Feature One" },
{ icon: "/icons/heart.svg", title: "Feature Two" },
{ icon: "/icons/settings.svg", title: "Feature Three" }
];
// Rendering the Hero11 component
;
```
--------------------------------
### Example FAQ List Data
Source: https://phoenixcoded.gitbook.io/saasable/ui-kit/development/components/faq/faq5
Provides an example array of FAQ items, demonstrating the structure defined by the '{ question: string, answer: string }' type. This data can be used to populate a FAQ section in a user interface.
```javascript
[{ question: "What is your return policy?", answer: "You can return items within 30 days of purchase." }, ...]
```
--------------------------------
### Responsive Navbar Component Implementation
Source: https://phoenixcoded.gitbook.io/saasable/ui-kit/development/components/navbar/navbar-content/navbarcontent2
This code defines a responsive navigation bar component named 'NavbarContent2'. It includes a logo, navigation menu, localization selector, and a 'Get Started' button. The component utilizes Material-UI's breakpoints and conditional rendering to adjust its layout across different screen sizes.
```typescript
This code defines a responsive navigation bar component ("}
```
--------------------------------
### Pricing5 Component Usage Example
Source: https://phoenixcoded.gitbook.io/saasable/ui-kit/development/components/pricing/pricing5
This snippet demonstrates how to use the Pricing5 component within your application. It shows the path to the page where the component is integrated, allowing for direct reference and modification of its usage.
```tsx
src/app/blocks/pricing/pricing5/page.tsx
```
--------------------------------
### Clientele Component ClienteleList Prop Example
Source: https://phoenixcoded.gitbook.io/saasable/ui-kit/development/components/clientele/clientele2
Shows the expected structure for the 'clienteleList' prop of the Clientele component. This prop is essential for providing the data that the component will use to render the client logos.
```plain text
clienteleList
```
--------------------------------
### NavbarContent8 Component Usage and Props
Source: https://phoenixcoded.gitbook.io/saasable/ui-kit/development/components/navbar/navbar-content/navbarcontent8
This snippet describes the NavbarContent8 component, which dynamically displays a responsive navigation bar. It splits navigation items for larger screens and uses a popper menu for smaller screens, including a logo and a 'Get Started' button. All available props are managed within the component's usage path.
```plaintext
This component, NavbarContent8, dynamically displays a responsive navigation bar that splits provided navigation items into two groups for larger screens and utilizes a popper menu for smaller screens, incorporating a logo and a "Get Started" button.
```
--------------------------------
### Pricing Plan Structure Example
Source: https://phoenixcoded.gitbook.io/saasable/ui-kit/development/components/pricing/pricing7
An example illustrating the structure for pricing plan details. This includes the plan's title, description, price, a list of features, and a call-to-action link. It's a common pattern for presenting tiered subscription options.
```json
{
"title": "Pro Plan",
"description": "Ideal for growing businesses.",
"price": "$29/month",
"features": [
"Feature 1",
"Feature 2",
"Feature 3"
],
"link": "/signup"
}
```
--------------------------------
### NavbarContent3 Component Definition and Props
Source: https://phoenixcoded.gitbook.io/saasable/ui-kit/development/components/navbar/navbar-content/navbarcontent3
This snippet defines the NavbarContent3 component, responsible for rendering a responsive navigation bar. It includes a logo, navigation menu, search input, and a 'Get Started' button. The component utilizes Material-UI for responsive design and conditional rendering. All available props for this component are managed within the specified file.
```tsx
This code defines a responsive navigation bar component (\"NavbarContent3\") that includes a logo, navigation menu, search input, and \"Get Started\" button, with layout and visibility adjustments based on screen size using Material-UI's breakpoints and conditional rendering.\nAll available props for the NavbarContent3 component are defined and handled within the Component usage path file. This allows for easy modifications to the content of the NavbarContent section.
```
--------------------------------
### FAQ General Introduction Text
Source: https://phoenixcoded.gitbook.io/saasable/ui-kit/development/components/faq/faq5
Provides the general introductory text for the FAQ section. This text informs users about the content of the FAQ.
```plaintext
Here are answers to some of the most common questions we receive.
```