aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/app/components/TimetableSkeleton.tsx
diff options
context:
space:
mode:
authorAriel Costas Guerrero <ariel@costas.dev>2025-12-24 19:33:49 +0100
committerAriel Costas Guerrero <ariel@costas.dev>2025-12-24 19:33:49 +0100
commitcfbb1625e7873264e2ef435cc76fec2b59cf58d8 (patch)
tree092e04e7750064f5ed1bf6aa2ea625c87877e2e8 /src/frontend/app/components/TimetableSkeleton.tsx
parent9ed46bea58dbb81ceada2a957fd1db653fb21e52 (diff)
Refactor map components and improve modal functionality
Diffstat (limited to 'src/frontend/app/components/TimetableSkeleton.tsx')
-rw-r--r--src/frontend/app/components/TimetableSkeleton.tsx74
1 files changed, 0 insertions, 74 deletions
diff --git a/src/frontend/app/components/TimetableSkeleton.tsx b/src/frontend/app/components/TimetableSkeleton.tsx
deleted file mode 100644
index 2d4fc29..0000000
--- a/src/frontend/app/components/TimetableSkeleton.tsx
+++ /dev/null
@@ -1,74 +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 TimetableSkeletonProps {
- rows?: number;
-}
-
-export const TimetableSkeleton: React.FC<TimetableSkeletonProps> = ({
- rows = 4,
-}) => {
- const { t } = useTranslation();
-
- return (
- <SkeletonTheme
- baseColor="var(--skeleton-base)"
- highlightColor="var(--skeleton-highlight)"
- >
- <div className="timetable-container">
- <div className="timetable-caption">
- <Skeleton width="250px" height="1.1rem" />
- </div>
-
- <div className="timetable-cards">
- {Array.from({ length: rows }, (_, index) => (
- <div key={`timetable-skeleton-${index}`} className="timetable-card">
- <div className="card-header">
- <div className="line-info">
- <Skeleton
- width="40px"
- height="24px"
- style={{ borderRadius: "4px" }}
- />
- </div>
-
- <div className="destination-info">
- <Skeleton width="120px" height="0.95rem" />
- </div>
-
- <div className="time-info">
- <Skeleton
- width="60px"
- height="1.1rem"
- style={{ fontFamily: "monospace" }}
- />
- </div>
- </div>
-
- <div className="card-body">
- <div className="route-streets">
- <Skeleton
- width="50px"
- height="0.8rem"
- style={{
- display: "inline-block",
- borderRadius: "3px",
- marginRight: "0.5rem",
- }}
- />
- <Skeleton
- width="200px"
- height="0.85rem"
- style={{ display: "inline-block" }}
- />
- </div>
- </div>
- </div>
- ))}
- </div>
- </div>
- </SkeletonTheme>
- );
-};