squash: v3 part 3

src/components/Button/Button.tsx

@@ -11,7 +11,7 @@ export enum ButtonType {
 
 export interface ButtonProps {
   theme?: 'primary' | 'secondary' | 'positive' | 'caution' | 'danger' | 'discord';
-  label: string | JSX.Element;
+  label?: string | JSX.Element;
   disabled?: boolean;
   className?: string;
   onClick?: () => void;
@@ -49,8 +49,9 @@ const Button: FC<ButtonProps> = ({
     }
 
     return (
-        <button type="button" disabled={disabled} className={twMerge('button', buttonClass, disabled && 'pointer-events-none', className)} onClick={onClick}>
-            {children || label}
+        <button type="button" disabled={disabled} className={twMerge('button flex gap-x-2 items-center', buttonClass, disabled && 'pointer-events-none', className)} onClick={onClick}>
+            {label}
+            {children}
         </button>
     );
 };

src/components/Discord/Discord.tsx

@@ -1,22 +1,23 @@
 import Image from 'next/legacy/image';
+import Link from 'next/link';
 import Button from '../Button/Button';
 import { links } from '../../constants/links';
 
 const Discord = () => (
-    <div className="grid gap-y-2">
+    <div className="flex-col items-center lg:items-start flex gap-y-2.5">
         <span className="flex justify-center gap-x-5 lg:justify-start">
             <Image src="/svg/discord.svg" layout="intrinsic" width={40} height={40} />
             <h3 className="text-discord">Discord</h3>
         </span>
         <p>Join us to chat with other members of the community, get started with contributing, or ask us a question!</p>
 
-        <a
+        <Link
             href={links.discord}
             target="_blank"
             rel="noreferrer"
         >
             <Button label="Join Community!" theme="discord" />
-        </a>
+        </Link>
     </div>
 );
 

src/components/Downloads/DownloadLinks.tsx

@@ -1,19 +1,30 @@
+import Link from 'next/link';
 import Button from '../Button/Button';
 
 type DownloadProps = {
-    stableLink: string,
-    devLink: string,
+    stableLink?: string,
+    devLink?: string,
     aircraft: string,
 
 }
 
-const downloadLinks = ({ aircraft }: DownloadProps) => (
+const downloadLinks = ({ stableLink, devLink, aircraft }: DownloadProps) => (
     <span className="flex flex-col gap-y-1.5">
         <h3>{aircraft}</h3>
-        <span className="flex gap-x-2.5">
-            <Button label="Stable" />
-            <Button theme="secondary" label="Development" />
-        </span>
+        {stableLink && devLink ? (
+            <>
+                <span className="flex gap-x-2.5">
+                    <Link href={stableLink}>
+                        <Button>Stable</Button>
+                    </Link>
+                    <Link href={devLink}>
+                        <Button theme="secondary">Development</Button>
+                    </Link>
+                </span>
+            </>
+        ) : (
+            <p>Use our installer to download.</p>
+        )}
     </span>
 );
 

src/components/Faqs/Faqs.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import Image from 'next/legacy/image';
+
+type FaqsProps = {
+    question: string,
+    response?: string,
+}
+
+// @TODO expand to see response functionality
+
+const Faqs = ({ question }: FaqsProps) => {
+    const [isToggled, setIsToggled] = useState<boolean>(false);
+
+    const onToggle = () => {
+        if (isToggled) {
+            setIsToggled(false);
+        } else {
+            setIsToggled(true);
+        }
+    };
+
+    return (
+        <div className="h-auto w-auto flex my-14 justify-between bg-navy-light text-left rounded-lg hover:outline">
+            <h4 className="p-6 ">{question}</h4>
+            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+            <button type="button" className="px-5" onClick={onToggle}>
+                <Image className="cursor-pointer" src="/svg/button-plus.svg" height={30} width={30} />
+            </button>
+        </div>
+    );
+};
+
+export default Faqs;

src/components/Navigation/Footer.tsx

@@ -50,6 +50,7 @@ const Footer = () => (
                                 <NavItem label="Projects" href="/projects" />
                                 <NavItem label="Docs" href={links.docs} />
                                 <NavItem label="Map" href="/map" />
+                                <NavItem label="FAQ" href={links.docsfaq} />
                             </NavWrapper>
 
                             <NavWrapper label="Socials">

src/components/Notam/Card.tsx

@@ -3,7 +3,7 @@ import Image from "next/legacy/image";
 import Tag from '../Utils/Tag';
 import { PostListing } from '../../lib/notams/posts';
 
-const Card = (props: PostListing) => (
+const Card = (props: Omit<PostListing, 'embedPreviewImage'>) => (
     <div className="border-2 border-transparent hover:border-primary rounded-md overflow-hidden">
         <div className={`
         ${props.index === 0

src/components/Projects/Card.tsx

@@ -12,7 +12,7 @@ type CardProps = {
     category: any,
     metaImage?: string,
     metaAlt?: string,
-    href: string,
+    href?: string,
     downloadURL?: string,
     direction: 'horizontal' | 'vertical',
     disabled?: boolean,
@@ -42,14 +42,16 @@ const Card = ({
                         {description}
                     </p>
                     <span className="flex flex-wrap gap-2 py-4 mt-auto">
-                        <Link href={href}>
-                            <Button label="Learn More" theme="secondary" />
-                        </Link>
+                        {href !== undefined && (
+                            <Link href={href}>
+                                <Button theme="secondary">Learn More</Button>
+                            </Link>
+                        )}
                         {downloadURL
                             && (
                                 <>
                                     <Link href={downloadURL} className={twJoin(disabled && 'pointer-events-none')}>
-                                        <Button label={<DownloadOutlined />} theme="primary" className="flex max-w-min items-center justify-center" disabled={disabled} />
+                                        <Button label={<DownloadOutlined />} theme="primary" className="flex max-w-min items-center justify-center" disabled={disabled}>Download</Button>
                                     </Link>
                                 </>
                             )}

src/components/Utils/Tag.tsx

@@ -1,13 +1,15 @@
 import { twMerge } from 'tailwind-merge';
 
-type TagType = 'Update' | 'News' | 'Aircraft' | 'Software' | 'Latest'
+export type TagType = 'Update' | 'News' | 'Aircraft' | 'Software' | 'Latest'
 
 export interface TagProps {
-    category: TagType;
+    category: AnyTag;
     className?: string;
 }
 
-const handleCategory = (category: TagType) => {
+export type AnyTag = TagType | Uppercase<TagType> | Lowercase<TagType>
+
+const handleCategory = (category: AnyTag) => {
     switch (category.toLowerCase() as Lowercase<TagType>) {
     case 'update':
         return 'border-yellow-500 bg-yellow-500/20 text-yellow-500';

src/constants/frequentlyAsked.ts

@@ -0,0 +1,8 @@
+export const frequentlyAsked = [
+    { question: 'When Will the Project be Released?', response: 'When it is ready' },
+    { question: 'What is the meaning of life?', response: 'Lorem Ipsum' },
+    { question: 'What is the meaning of life?', response: 'Lorem Ipsum' },
+    { question: 'What is the meaning of life?', response: 'Lorem Ipsum' },
+    { question: 'What is the meaning of life?', response: 'Lorem Ipsum' },
+    { question: 'What is the meaning of life?', response: 'Lorem Ipsum' },
+];

src/constants/links.ts

@@ -6,4 +6,5 @@ export const links: {[name: string]: string} = {
     twitter: 'https://x.com/flybywiresim',
     facebook: 'https://www.facebook.com/FlyByWireSimulations/',
     opencollective: 'https://opencollective.com/flybywire',
+    docsfaq: 'https://docs.flybywiresim.com/faq',
 };

src/layouts/landing/Hero.tsx

@@ -33,7 +33,6 @@ const Hero = () => {
                     </p>
                     <ButtonGroup>
                         <Button label="Download" theme="primary" onClick={() => router.push('/downloads')} />
-                        <Button label="More Info" theme="secondary" onClick={() => router.push('/projects/a32nx')} />
                     </ButtonGroup>
                 </div>
             </Container>

src/layouts/landing/Insights.tsx

@@ -59,7 +59,7 @@ const Insights = () => {
                 </div>
             </div>
 
-            <div className="min-w-[600px] max-xl:h-96 bg-red-500 grow-[3]">
+            <div className="md:min-w-[600px] max-xl:h-96 bg-red-500 grow-[3]">
                 <LeafletMap isFullPageMap={false} className="size-full" />
             </div>
         </Section>

src/layouts/landing/Installer.tsx

@@ -1,29 +1,30 @@
+import { useRouter } from 'next/router';
 import Section from '../../components/Utils/Section';
 import Container from '../../components/Utils/Container';
 import Button from '../../components/Button/Button';
-import { useRouter } from "next/router";
 
 const Installer = () => {
     const router = useRouter();
     return (
-    <Section theme="dark">
-        <Container className="grid gap-y-20 lg:grid-cols-3">
-            <div className="flex items-center justify-center">
-                <div className="grid gap-y-5">
-                    <h2>Custom-built Installer</h2>
-                    <p>
-                        Our custom-built, open-source installer is where we keep our projects for you to easily install.
-                    </p>
-                    <Button label="Download" theme="primary" onClick={() => router.push('/downloads')}/>
+        <Section theme="dark">
+            <Container className="grid gap-y-20 lg:grid-cols-3">
+                <div className="flex items-center justify-center">
+                    <div className="grid gap-y-5">
+                        <h2>Custom-built Installer</h2>
+                        <p>
+                            Our custom-built, open-source installer is where we keep our projects for you to easily install.
+                        </p>
+                        <Button label="Download" theme="primary" onClick={() => router.push('/downloads')} />
+                    </div>
                 </div>
-            </div>
 
-            {/* TODO: Change placeholder image */}
-            <div className="-m-8 -mb-32 lg:col-span-2 lg:m-0 lg:grid lg:p-12">
-                <img alt="Installer" src="/pages/index/installerPreview.png" />
-            </div>
-        </Container>
-    </Section>
-)};
+                {/* TODO: Change placeholder image */}
+                <div className="-m-8 -mb-32 lg:col-span-2 lg:m-0 lg:grid lg:p-12">
+                    <img alt="Installer" src="/pages/index/installerPreview.png" />
+                </div>
+            </Container>
+        </Section>
+    );
+};
 
 export default Installer;

src/lib/notams/posts.ts

@@ -9,6 +9,7 @@ import rehypeSlug from 'rehype-slug-custom-id';
 import { remark } from 'remark';
 import { rehype } from 'rehype';
 import { slug } from 'github-slugger';
+import { TagType } from '../../components/Utils/Tag';
 
 export interface PostListing {
     index: number;
@@ -18,7 +19,8 @@ export interface PostListing {
     title: string,
     description: string,
     authors?: string[],
-    category: string,
+    category: TagType | Uppercase<TagType> | Lowercase<TagType>,
+    embedPreviewImage: string,
     metaImage: string,
     metaAlt: string,
 }

src/pages/downloads/index.tsx

@@ -1,4 +1,5 @@
 import { NextPage } from 'next';
+import Link from 'next/link';
 import Section from '../../components/Utils/Section';
 import Container from '../../components/Utils/Container';
 import Button from '../../components/Button/Button';
@@ -24,7 +25,9 @@ const Downloads: NextPage = () => (
                         Our easy-to-use installer is the easiest way to get started with our addons. Simply launch and
                         install any addon you want, with only two clicks.
                     </p>
-                    <Button label="Download" theme="primary" className="mt-auto" />
+                    <Link href="https://cdn.flybywiresim.com/installer/release/FlyByWire_Installer_Setup.exe">
+                        <Button label="Download" theme="primary" className="mt-auto" />
+                    </Link>
                 </div>
 
                 <span className="w-full h-px 2xl:w-px 2xl:h-full bg-gray-500" />
@@ -33,7 +36,11 @@ const Downloads: NextPage = () => (
                     <h2>Direct Download</h2>
                     <p className="pb-6">If you prefer a direct download, the following links are available.</p>
                     <div className="flex flex-col lg:flex-row gap-8">
-                        <DownloadLinks aircraft="A32NX" stableLink="" devLink="" />
+                        <DownloadLinks
+                            aircraft="A32NX"
+                            stableLink="https://github.com/flybywiresim/aircraft/releases/download/assets/stable/A32NX-stable.zip"
+                            devLink="https://github.com/flybywiresim/aircraft/releases/download/assets/master/A32NX-master.7z"
+                        />
                         <DownloadLinks aircraft="A380X" stableLink="" devLink="" />
                     </div>
                 </div>

src/pages/faq/index.tsx

@@ -0,0 +1,38 @@
+import { NextPage } from 'next';
+import Image from 'next/legacy/image';
+import Section from '../../components/Utils/Section';
+import Container from '../../components/Utils/Container';
+import Faqs from '../../components/Faqs/Faqs';
+import { frequentlyAsked } from '../../constants/frequentlyAsked';
+
+const BackgroundImage = () => (
+    <div className="absolute left-0 top-0 -z-10 h-144 w-screen opacity-90">
+        <Image src="/pages/faq/faq.png" layout="fill" objectFit="cover" />
+    </div>
+);
+
+const FAQ: NextPage = () => (
+    <>
+        <Section className="h-144 flex flex-col justify-center bg-black/50 bg-gradient-to-b from-primary/30 to-secondary/100">
+            <BackgroundImage />
+            <Container className="h-144 flex flex-col justify-center align-middle text-center">
+                <div className="">
+                    <h2 className="pb-8">Looking for some help?</h2>
+                    <p>
+                        We have you covered! Below we have a wide coverage of frequently asked questions, along with
+                        each of their answers
+                    </p>
+                </div>
+            </Container>
+        </Section>
+        <Section theme="dark">
+            <Container>
+                {frequentlyAsked.map((faq, index) => (
+                    <Faqs key={index} question={faq.question} />
+                ))}
+            </Container>
+        </Section>
+    </>
+);
+
+export default FAQ;