diff options
| author | Ariel Costas Guerrero <ariel@costas.dev> | 2025-12-24 19:33:49 +0100 |
|---|---|---|
| committer | Ariel Costas Guerrero <ariel@costas.dev> | 2025-12-24 19:33:49 +0100 |
| commit | cfbb1625e7873264e2ef435cc76fec2b59cf58d8 (patch) | |
| tree | 092e04e7750064f5ed1bf6aa2ea625c87877e2e8 /src/frontend/app/components/TimetableSkeleton.tsx | |
| parent | 9ed46bea58dbb81ceada2a957fd1db653fb21e52 (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.tsx | 74 |
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> - ); -}; |
