-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Add] Settings page, [Add] Settings options like LBS by default, etc.…
….., [Fix] minor fixes
- Loading branch information
Showing
20 changed files
with
23,704 additions
and
22,740 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import React, { FC } from 'react'; | ||
| import * as RadixAccordion from '@radix-ui/react-accordion'; | ||
| import { ChevronDownIcon } from '@radix-ui/react-icons'; | ||
|
|
||
| interface AccordionProps { | ||
| items: { title: string; content: React.ReactNode }[]; | ||
| } | ||
|
|
||
| const Accordion: FC<AccordionProps> = ({ items }) => ( | ||
| <RadixAccordion.Root | ||
| className="-mt-3 w-full " | ||
| type="single" | ||
| defaultValue="item-1" | ||
| collapsible | ||
| > | ||
| {items.map((item, index) => ( | ||
| <AccordionItem key={index} className="last:mb-2 " value={`item-${index + 1}`}> | ||
| <AccordionTrigger><span className="text-primary opacity-75 text-[20px] -ml-2">{item.title}</span></AccordionTrigger> | ||
| <AccordionContent>{item.content}</AccordionContent> | ||
| </AccordionItem> | ||
| ))} | ||
| </RadixAccordion.Root> | ||
| ); | ||
|
|
||
| const AccordionItem: FC<React.ComponentProps<typeof RadixAccordion.Item>> = React.forwardRef(({ children, ...props }, forwardedRef) => ( | ||
| <RadixAccordion.Item | ||
| className="overflow-hidden" | ||
| {...props} | ||
| ref={forwardedRef} | ||
| > | ||
| {children} | ||
| </RadixAccordion.Item> | ||
| )); | ||
|
|
||
| const AccordionTrigger: FC<React.ComponentProps<typeof RadixAccordion.Trigger>> = React.forwardRef(({ children, ...props }, forwardedRef) => ( | ||
| <RadixAccordion.Header className="flex"> | ||
| <RadixAccordion.Trigger | ||
| className=" group flex h-[45px] flex-1 cursor-default items-center justify-between px-5 text-[15px] leading-none outline-none" | ||
| {...props} | ||
| ref={forwardedRef} | ||
| > | ||
| {children} | ||
| <ChevronDownIcon | ||
| className="ease-[cubic-bezier(0.87,_0,_0.13,_1)] text-primary transition-transform duration-300 group-data-[state=open]:rotate-180 " | ||
| aria-hidden | ||
| /> | ||
| </RadixAccordion.Trigger> | ||
| </RadixAccordion.Header> | ||
| )); | ||
|
|
||
| const AccordionContent: FC<React.ComponentProps<typeof RadixAccordion.Content>> = React.forwardRef(({ children, ...props }, forwardedRef) => ( | ||
| <RadixAccordion.Content | ||
| className="data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden " | ||
| {...props} | ||
| ref={forwardedRef} | ||
| > | ||
| <div className="">{children}</div> | ||
| </RadixAccordion.Content> | ||
| )); | ||
|
|
||
| Accordion.displayName = 'Accordion'; | ||
| AccordionItem.displayName = 'AccordionItem'; | ||
| AccordionTrigger.displayName = 'AccordionTrigger'; | ||
| AccordionContent.displayName = 'AccordionContent'; | ||
|
|
||
| export default Accordion; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import * as Switch from "@radix-ui/react-switch"; | ||
| import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal, PromiseLikeOfReactNode, useState, useEffect } from "react"; | ||
| import Tooltip from "../tooltip/tooltip"; | ||
| import { getSetting } from "@/app/utils/states"; | ||
|
|
||
| export const CreateSwitch = (id: string | undefined, label: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode | null | undefined, tooltipLabel: any, handleChange: (arg0: boolean) => void) => { | ||
| const [defaultChecked, setDefaultChecked] = useState(false); | ||
| const [isLoaded, setIsLoaded] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| if (typeof window === 'object') { | ||
| const storedValue = getSetting(id as string); | ||
| if (storedValue !== null) { | ||
| setDefaultChecked(storedValue === 'true'); | ||
| } | ||
| setIsLoaded(true); | ||
| } | ||
| }, [id]); | ||
|
|
||
| return ( | ||
| <> | ||
| {isLoaded ? ( | ||
| <div className="flex w-full px-5 pb-5 last:pb-2 justify-between items-center"> | ||
| <Tooltip followCursor={true} text={tooltipLabel}> | ||
| <label className="text-primary opacity-40 font-main text-[13px] text-start leading-none pr-[15px] truncate" htmlFor={id}> | ||
| {label} | ||
| </label> | ||
| </Tooltip> | ||
| <Switch.Root | ||
| className="w-[36px] cursor-pointer h-[20px] bg-secondary rounded-full relative focus:shadow-[0_0_0_2px] focus:shadow-black data-[state=checked]:bg-tertiary outline-none " | ||
| id={id} | ||
| onCheckedChange={(e) => handleChange(e)} | ||
| defaultChecked={defaultChecked} | ||
| > | ||
| <Switch.Thumb className="block w-[18px] h-[18px] bg-primary opacity-40 outline-none data-[state=checked]:opacity-100 border-tertiary data-[state=checked]:brightness-100 rounded-full transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[18px]" /> | ||
| </Switch.Root> | ||
| </div> | ||
| ) : ( | ||
| <div role="status" className="flex w-full first:mt-4 px-5 pb-5 last:pb-2 justify-between items-center animate-pulse"> | ||
| <div className="h-4 bg-secondary rounded-full w-full "></div> | ||
| <span className="sr-only">Loading...</span> | ||
| </div> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import React from 'react'; | ||
| import * as Tooltips from '@radix-ui/react-tooltip'; | ||
|
|
||
| const Tooltip = ({ text, children, followCursor } : { text: string, children: React.ReactNode, followCursor: boolean }) => { | ||
| return ( | ||
| <Tooltips.Provider delayDuration={100}> | ||
| <Tooltips.Root> | ||
| <Tooltips.Trigger asChild> | ||
| {children} | ||
| </Tooltips.Trigger> | ||
| <Tooltips.Portal> | ||
| <Tooltips.Content | ||
| className="z-50 shadow-background border-2 italic text-start text-quinary border-tertiary backdrop-blur-md bg-hover ml-4 max-w-[200px] data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[12px] px-[15px] py-[10px] text-[13px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_0px_100px_0px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]" | ||
| sideOffset={5} | ||
| > | ||
| {text} | ||
| </Tooltips.Content> | ||
| </Tooltips.Portal> | ||
| </Tooltips.Root> | ||
| </Tooltips.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| export default Tooltip; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| export default function Loading() { | ||
| // You can add any UI inside Loading, including a Skeleton. | ||
| return <div | ||
| className="inline-block h-12 w-12 animate-spin rounded-full border-[8px] border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" role="status"> | ||
| <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Loading...</span> | ||
| </div>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| "use client"; | ||
| import React from "react"; | ||
| import { CreateSwitch } from "../UI/switch/switch"; | ||
| import Accordion from "../UI/switch/accordion"; | ||
| import { useSwitchState } from "../utils/states"; | ||
| import { IoIosArrowBack } from "react-icons/io"; | ||
| import { useRouter } from "next/navigation"; | ||
|
|
||
| export default function Settings() { | ||
| const [useSimBriefSwitch, handleUseSimBriefSwitch] = useSwitchState('useSimBriefSwitch', false); | ||
| const [useLBSwitch, handleUseLBSwitch] = useSwitchState('useLBSwitch', false); | ||
| const [useInfoViewerSwitch, handleUseInfoViewerSwitch] = useSwitchState('useInfoViewerSwitch', true); | ||
| const [useMetarSwitch, handleUseMetarSwitch] = useSwitchState('useMetarSwitch', true); | ||
|
|
||
| const accordionItems = [ | ||
| { | ||
| title: 'General Settings', | ||
| content: ( | ||
| <form> | ||
| {CreateSwitch('useSimBriefSwitch', 'Use SimBrief Integration automatically', 'Enable integration with SimBrief for flight metrics', handleUseSimBriefSwitch)} | ||
| {CreateSwitch('useInfoViewerSwitch', 'View Simbrief information before takeoff calculation', 'View Simbrief information before takeoff calculation', handleUseInfoViewerSwitch)} | ||
| {CreateSwitch('useLBSwitch', 'Use LBS by default', 'Use LBS instead of KG by default', handleUseLBSwitch)} | ||
| {CreateSwitch('useMetarSwitch', 'Use metar API', 'Use metar API by default', handleUseMetarSwitch)} | ||
| </form> | ||
| ), | ||
| } | ||
| // Puedes agregar más secciones y ajustes aquí según sea necesario | ||
| ]; | ||
|
|
||
|
|
||
| const router = useRouter(); | ||
| return ( | ||
| <div className="w-screen max-w-[1200px] overflow-hidden max-h-[100vh] flex justify-between items-center h-screen"> | ||
|
|
||
| <div style={{ filter: 'drop-shadow(0 0px 40px rgba(255, 255, 255, 0.1))' }} className="w-full px-[50px] border-secondary h-full max-h-[calc(100vh-100px)] backdrop-blur-[2px] rounded-[30px]"> | ||
|
|
||
| <div className="flex items-center justify-start"> | ||
| <button className='transition h-fit mr-4 duration-300 border border-tertiary bg-button hover:bg-buttonHover text-white py-2 px-2 rounded-[20px] text-center' onClick={() => router.back()}><IoIosArrowBack /></button> | ||
| <h1 className="text-primary opacity-90 text-start py-4 border-tertiary font-main text-[30px] rounded-[20px] ">Settings</h1> | ||
| </div> | ||
| <section className='text-primary w-full pt-5 cursor-pointer max-h-[calc(100vh-100px)]'> | ||
| <Accordion items={accordionItems} /> | ||
| </section> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.