aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/app/components/EstimatesTableSkeleton.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/frontend/app/components/EstimatesTableSkeleton.tsx')
-rw-r--r--src/frontend/app/components/EstimatesTableSkeleton.tsx114
1 files changed, 0 insertions, 114 deletions
diff --git a/src/frontend/app/components/EstimatesTableSkeleton.tsx b/src/frontend/app/components/EstimatesTableSkeleton.tsx
deleted file mode 100644
index 2ef770b..0000000
--- a/src/frontend/app/components/EstimatesTableSkeleton.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from "react";
-import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
-import "react-loading-skeleton/dist/skeleton.css";
-import { useTranslation } from "react-i18next";
-
-interface EstimatesTableSkeletonProps {
- rows?: number;
-}
-
-export const EstimatesTableSkeleton: React.FC<EstimatesTableSkeletonProps> = ({
- rows = 3
-}) => {
- const { t } = useTranslation();
-
- return (
- <SkeletonTheme baseColor="#f0f0f0" highlightColor="#e0e0e0">
- <table className="table">
- <caption>
- <Skeleton width="250px" />
- </caption>
-
- <thead>
- <tr>
- <th>{t("estimates.line", "Línea")}</th>
- <th>{t("estimates.route", "Ruta")}</th>
- <th>{t("estimates.arrival", "Llegada")}</th>
- <th>{t("estimates.distance", "Distancia")}</th>
- </tr>
- </thead>
-
- <tbody>
- {Array.from({ length: rows }, (_, index) => (
- <tr key={`skeleton-${index}`}>
- <td>
- <Skeleton width="40px" height="24px" style={{ borderRadius: "4px" }} />
- </td>
- <td>
- <Skeleton width="120px" />
- </td>
- <td>
- <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
- <Skeleton width="60px" />
- <Skeleton width="40px" />
- </div>
- </td>
- <td>
- <Skeleton width="50px" />
- </td>
- </tr>
- ))}
- </tbody>
- </table>
- </SkeletonTheme>
- );
-};
-
-interface EstimatesGroupedSkeletonProps {
- groups?: number;
- rowsPerGroup?: number;
-}
-
-export const EstimatesGroupedSkeleton: React.FC<EstimatesGroupedSkeletonProps> = ({
- groups = 3,
- rowsPerGroup = 2
-}) => {
- const { t } = useTranslation();
-
- return (
- <SkeletonTheme baseColor="#f0f0f0" highlightColor="#e0e0e0">
- <table className="table grouped-table">
- <caption>
- <Skeleton width="250px" />
- </caption>
-
- <thead>
- <tr>
- <th>{t("estimates.line", "Línea")}</th>
- <th>{t("estimates.route", "Ruta")}</th>
- <th>{t("estimates.arrival", "Llegada")}</th>
- <th>{t("estimates.distance", "Distancia")}</th>
- </tr>
- </thead>
-
- <tbody>
- {Array.from({ length: groups }, (_, groupIndex) => (
- <React.Fragment key={`group-${groupIndex}`}>
- {Array.from({ length: rowsPerGroup }, (_, rowIndex) => (
- <tr key={`skeleton-${groupIndex}-${rowIndex}`} className={rowIndex === 0 ? "group-start" : ""}>
- <td>
- {rowIndex === 0 && (
- <Skeleton width="40px" height="24px" style={{ borderRadius: "4px" }} />
- )}
- </td>
- <td>
- <Skeleton width="120px" />
- </td>
- <td>
- <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
- <Skeleton width="60px" />
- <Skeleton width="40px" />
- </div>
- </td>
- <td>
- <Skeleton width="50px" />
- </td>
- </tr>
- ))}
- </React.Fragment>
- ))}
- </tbody>
- </table>
- </SkeletonTheme>
- );
-};