noah/noahspan-flying
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

adding load more button to flights page (#114)

Browse Source
This commit was merged in pull request #114.
This commit is contained in:
noahspannbauer
2026-03-21 10:43:44 -05:00
committed by GitHub
parent 477469831f
commit a9abb5863c
9 changed files with 473 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/logbookCard/LogbookCard.tsx
View File

@@ -1,7 +1,12 @@
import { LogbookCardProps } from "./LogbookCardProps.interface";
import TrackMap from "../trackMap/TrackMap";
import { useBreakpoints } from "../../hooks/useBreakpoints/UseBreakpoints";
import { ScreenSize } from "../../enums/screenSize";
import { useEffect } from "react";
const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps) => {
const { screenSize } = useBreakpoints();
return (
<div>
{logs.map((log) => {
@@ -9,8 +14,8 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
const formattedDate: string = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
return (
<div className='card bg-base-100 border border-base-300 p-2'>
<div className='card-body' key={log.id}>
<div className='card bg-base-100 border border-base-300 p-2 mb-5'>
<div className={`card-body ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? 'p-2' : ''}`} key={log.id}>
<h2 className='card-title font-bold text-2xl'>{formattedDate}</h2>
<div>
{mode === 'flights' && log.tracks && log.tracks.length > 0 &&
@@ -24,10 +29,10 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
}
</div>
<div className='collapse collapse-arrow bg-base-100 border-base-300 border'>
<input type='radio' name='details-accordion' />
<input type='checkbox' />
<div className='collapse-title font-semibold'>Details</div>
<div className='collapse-content'>
<div className='grid grid-cols-12 gap-3 mr-[30%] ml-[30%] mt-4 mb-4'>
<div className={`grid grid-cols-12 gap-3 ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? 'mr-[5%] ml-[5%]' : 'mr-[30%] ml-[30%]'} mt-4 mb-4`}>
<div className='col-span-6 font-bold'>
<span>Aircraft Make and Model</span>
</div>