Hi,

Thank you for your interest in our product. Currently, our React solutions are only based on Typescript and the JS version is not available. You can consider using TS as it provides lots of advantages and is now suggested by the React authors officially. You can check this guide to proceed. However, you can request a refund if TS is not the way for you.

If you purchasing another products, please let us know.

Regards.

import React from "react";
import { useSortBy, useTable } from "react-table";
import { data } from "./Data";
import { useRowSpan } from "./useRowSpan";
import "./styles.css";

const borderStyle = {
border: "1px solid gray",
padding: "8px 10px"
};

export default function App() {
const tableData = React.useMemo(() => data, []);
const columns = React.useMemo(() => {
return [
{
Header: "Property Name",
accessor: "propertyName",
enableRowSpan: true
},
{
Header: "Cost Category",
accessor: "costCategory",
enableRowSpan: true
},
{
Header: "WO Number",
accessor: "woNumber"
},
{
Header: "Supplier",
accessor: "supplier"
},
{
Header: "Invoice Date",
accessor: "invoiceDate"
},
{
Header: "Invoice Total",
accessor: "invoiceTotal"
}
];
}, []);

const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
rowSpanHeaders
} = useTable(
{ columns, data: tableData },
(hooks) => hooks.useInstance.push(useRowSpan),
useSortBy
);

return (
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()} style={borderStyle}>
{column.render("Header")}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);

for (let j = 0; j < row.allCells.length; j++) {
let cell = row.allCells[j];
let rowSpanHeader = rowSpanHeaders.find(
(x) => x.id === cell.column.id
);

if (rowSpanHeader) {
if (
rowSpanHeader.topCellValue === null ||
rowSpanHeader.topCellValue !== cell.value
) {
cell.isRowSpanned = false;
rowSpanHeader.topCellValue = cell.value;
rowSpanHeader.topCellIndex = i;
cell.rowSpan = 1;
} else {
rows[rowSpanHeader.topCellIndex].allCells[j].rowSpan++;
cell.isRowSpanned = true;
}
}
}
return null;
})}
{rows.map((row) => {
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
if (cell.isRowSpanned) return null;
else
return (
<td
rowSpan={cell.rowSpan}
style={borderStyle}
{...cell.getCellProps()}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
);
}

"use client";
import { useEffect, useState } from "react";
import { motion } from "framer-motion";

let interval: any;

type Card = {
id: number;
name: string;
designation: string;
content: React.ReactNode;
};

export const CardStack = ({
items,
offset,
scaleFactor,
}: {
items: Card[];
offset?: number;
scaleFactor?: number;
}) => {
const CARD_OFFSET = offset || 10;
const SCALE_FACTOR = scaleFactor || 0.06;
const [cards, setCards] = useState<Card[]>(items);

useEffect(() => {
startFlipping();

return () => clearInterval(interval);
}, []);
const startFlipping = () => {
interval = setInterval(() => {
setCards((prevCards: Card[]) => {
const newArray = [...prevCards]; // create a copy of the array
newArray.unshift(newArray.pop()!); // move the last element to the front
return newArray;
});
}, 5000);
};

return (
<div className="relative h-60 w-60 md:h-60 md:w-96">
{cards.map((card, index) => {
return (
<motion.div
key={card.id}
className="absolute dark:bg-black bg-white h-60 w-60 md:h-60 md:w-96 rounded-3xl p-4 shadow-xl border border-neutral-200 dark:border-white/[0.1] shadow-black/[0.1] dark:shadow-white/[0.05] flex flex-col justify-between"
style={{
transformOrigin: "top center",
}}
animate={{
top: index * -CARD_OFFSET,
scale: 1 - index * SCALE_FACTOR, // decrease scale for cards that are behind
zIndex: cards.length - index, // decrease z-index for the cards that are behind
}}
>
<div className="font-normal text-neutral-700 dark:text-neutral-200">
{card.content}
</div>
<div>
<p className="text-neutral-500 font-medium dark:text-white">
{card.name}
</p>
<p className="text-neutral-400 font-normal dark:text-neutral-200">
{card.designation}
</p>
</div>
</motion.div>
);
})}
</div>
);
};

import type { Metadata } from 'next';

import './globals.css'
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';

export const metadata: Metadata = {
title: 'Travel',
description: 'Travel UI/UX App for Camping',
}

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<Navbar />
<main className="relative overflow-hidden">
{children}
</main>
<Footer />
</body>
</html>
)
}

import { useEffect, useRef } from "react";
import useMousePosition from "./hooks/useMousePosition";
import { drawCircle } from "./utilities";
const MouseBall = () => {
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const [coords, handleCoords] = useMousePosition();

useEffect(() => {
if (canvasRef?.current) {
const ctx = canvasRef.current.getContext("2d");

requestAnimationFrame(function ball() {
//@ts-ignore
drawCircle(ctx, {
radius: 50,
lineWidth: 3,
strokeStyle: "#4F7CAC",
colorFill: "#4F7CAC",
startY: coords.y,
startX: coords.x
});
});
}
}, [coords.x, coords.y]);
return (
<>
<h1>Tracking ball</h1>
<canvas

ref={canvasRef}
width="400"
height="350"
onMouseMove={(e) => {
handleCoords((e as unknown) as MouseEvent);
}}
style={{ border: "2px solid black" }}
></canvas>
</>
);
};

export default MouseBall;