Rules.js 3.2 KB
  import Heading from "@/components/reuseables/Heading";
  import { cleanImage } from "@/layout/imageHandling";
  import Image from "next/image";
  import Link from "next/link";
  import React from "react";
  import { Col, Container, Row } from "react-bootstrap";

  const ruleData = [
    {
      number: "01",
      title: "Lorem ipsum dolor sit amet",
      description:
        "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
      readMoreText: "Read More",
      ruleDetailsUrl: "/corpedia/details",
    },
    {
      number: "02",
      title: "Lorem ipsum dolor sit amet",
      description:
        "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
      readMoreText: "Read More",
      ruleDetailsUrl: "/corpedia/details",
    },
    {
      number: "03",
      title: "Lorem ipsum dolor sit amet",
      description:
        "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
      readMoreText: "Read More",
      ruleDetailsUrl: "/corpedia/details",
    },
  ];

  const Rules = ({title,subtitle,description,image,rule}) => {
    console.log(rule,"rules")
    return (
      <>
        <section className="corpedia-rules">
          <div className="ptb-100">
            <Container>
              <Row>
                <Col lg={6} md={12}>
                  <div className="rules-image">
                    <Image
                      src={cleanImage(image?.url)}
                      alt="image"
                      layout="fill"
                      className="img-fluid image"
                    />
                  </div>
                </Col>

                <Col lg={6} md={12} className="d-flex align-items-center">
                  <div className="about-content">
                    <span className="sub-title">
                    {subtitle}
                    </span>
                    {/* <Heading
                      el="h2"
                      heading={title}
                      className="h2"
                    /> */}
                    <h2>{title}</h2>
                  <p>{description}</p>

                    <div className="rules-list">
                      <ul className="features-list">
                        
                        {rule &&
                          rule.map((item, idx) => (
                            <li key={item.idx} className="rule-listing">
                              <div className="number">0{idx+1}</div>
                              <h5>{item.Title}</h5>
                              <p>{item.Description}</p>
                              <div className="table" dangerouslySetInnerHTML={{ __html: item.details?.Details}}/>
                            </li>
                          ))}
                      </ul>
                    </div>
                  </div>
                </Col>
              </Row>
            </Container>
          </div>
        </section>
      </>
    );
  };

  export default Rules;