dotPagination.tsx

import * as React from "react";
import { PropertyControls, ControlType } from "framer";

// Props types
type Props = {
    amount: number;
    width: number;
    height: number;
    activeItem: number;
};

// Open class
export class dotPaginatiion extends React.Component<Props> {
    // Props by default
    static defaultProps: Props = {
        width: 64,
        height: 8,
        amount: 3,
        activeItem: 1
    };

    // Controls on the right panel
    static propertyControls: PropertyControls<Props> = {
        amount: {
            title: "Amount",
            type: ControlType.Number,
            max: 6,
            min: 2,
            step: 1
        },
        activeItem: {
            title: "Active item",
            type: ControlType.Number,
            max: 6,
            min: 1,
            step: 1
        }
    };

    // Render layout
    render() {
        // Create an array from "amount" and loop it via map() function
        const dotsAmount = [...Array(this.props.amount)];
        const dots = dotsAmount.map((dot, i) => {
            return (
                <svg
                    key={`dot${i}`}
                    width="8"
                    height="8"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M8.5 8.5h-8l4-8 4 8z"
                        // If activeItem matchs with current dot we change the color
                        fill={
                            i + 1 !== this.props.activeItem
                                ? "white"
                                : "#FF4E39"
                        }
                    />
                </svg>
            );
        });
        return <div style={style}>{dots}</div>;
    }
}

// Simple style
const style: React.CSSProperties = {
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between"
};