195 lines
7.3 KiB
TypeScript
195 lines
7.3 KiB
TypeScript
import React from 'react'
|
|
import Link from 'next/link'
|
|
import { useTranslation } from 'next-i18next'
|
|
import * as Dialog from '@radix-ui/react-dialog'
|
|
|
|
import CrossIcon from '~public/icons/Cross.svg'
|
|
import ShareIcon from '~public/icons/Share.svg'
|
|
import DiscordIcon from '~public/icons/discord.svg'
|
|
import GithubIcon from '~public/icons/github.svg'
|
|
|
|
import './index.scss'
|
|
|
|
const AboutModal = () => {
|
|
const { t } = useTranslation('common')
|
|
|
|
return (
|
|
<Dialog.Root>
|
|
<Dialog.Trigger asChild>
|
|
<li className="MenuItem">
|
|
<span>{t('modals.about.title')}</span>
|
|
</li>
|
|
</Dialog.Trigger>
|
|
<Dialog.Portal>
|
|
<Dialog.Overlay className="ScrollingOverlay">
|
|
<div className="DialogWrapper">
|
|
<Dialog.Content
|
|
className="About Dialog"
|
|
onOpenAutoFocus={(event) => event.preventDefault()}
|
|
>
|
|
<div className="DialogHeader">
|
|
<Dialog.Title className="DialogTitle">
|
|
{t('menu.about')}
|
|
</Dialog.Title>
|
|
<Dialog.Close className="DialogClose" asChild>
|
|
<span>
|
|
<CrossIcon />
|
|
</span>
|
|
</Dialog.Close>
|
|
</div>
|
|
|
|
<section>
|
|
<Dialog.Description className="DialogDescription">
|
|
Granblue.team is a tool to save and share team comps for{' '}
|
|
<a
|
|
href="https://game.granbluefantasy.jp"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Granblue Fantasy.
|
|
</a>
|
|
</Dialog.Description>
|
|
<Dialog.Description className="DialogDescription">
|
|
Start adding to a team and a URL will be created for you to
|
|
share wherever you like, no account needed.
|
|
</Dialog.Description>
|
|
<Dialog.Description className="DialogDescription">
|
|
However, if you do make an account, you can save any teams you
|
|
find for future reference and keep all of your teams together
|
|
in one place.
|
|
</Dialog.Description>
|
|
</section>
|
|
|
|
<section>
|
|
<Dialog.Title className="DialogTitle">Feedback</Dialog.Title>
|
|
<Dialog.Description className="DialogDescription">
|
|
This is an evolving project so feedback and suggestions are
|
|
greatly appreciated!
|
|
</Dialog.Description>
|
|
<Dialog.Description className="DialogDescription">
|
|
If you have a feature request, would like to report a bug, or
|
|
are enjoying the tool and want to say thanks, come hang out in
|
|
Discord!
|
|
</Dialog.Description>
|
|
<div className="LinkItem">
|
|
<Link href="https://discord.gg/qyZ5hGdPC8">
|
|
<a
|
|
href="https://discord.gg/qyZ5hGdPC8"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<div className="Left">
|
|
<DiscordIcon />
|
|
<h3>granblue-tools</h3>
|
|
</div>
|
|
<ShareIcon className="ShareIcon" />
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<Dialog.Title className="DialogTitle">Credits</Dialog.Title>
|
|
<Dialog.Description className="DialogDescription">
|
|
Granblue.team was built by{' '}
|
|
<a
|
|
href="https://twitter.com/jedmund"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
@jedmund
|
|
</a>{' '}
|
|
with a lot of help from{' '}
|
|
<a
|
|
href="https://twitter.com/lalalalinna"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
@lalalalinna
|
|
</a>{' '}
|
|
and{' '}
|
|
<a
|
|
href="https://twitter.com/tarngerine"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
@tarngerine
|
|
</a>
|
|
.
|
|
</Dialog.Description>
|
|
<Dialog.Description className="DialogDescription">
|
|
Many thanks also go to Disinfect, Slipper, Jif, Bless,
|
|
9highwind, and everyone else in{' '}
|
|
<a
|
|
href="https://game.granbluefantasy.jp/#guild/detail/1190185"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Fireplace
|
|
</a>{' '}
|
|
that helped with bug testing and feature requests. (P.S.
|
|
We're recruiting!) And yoey, but he won't join our
|
|
crew.
|
|
</Dialog.Description>
|
|
</section>
|
|
|
|
<section>
|
|
<Dialog.Title className="DialogTitle">
|
|
Contributing
|
|
</Dialog.Title>
|
|
<Dialog.Description className="DialogDescription">
|
|
This app is open source and licensed under{' '}
|
|
<a
|
|
href="https://choosealicense.com/licenses/agpl-3.0/"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
GNU AGPLv3
|
|
</a>
|
|
. Plainly, that means you can download the source, modify it,
|
|
and redistribute it if you attribute this project, use the
|
|
same license, and keep it open source. You can contribute on
|
|
Github.
|
|
</Dialog.Description>
|
|
<ul className="Links">
|
|
<li className="LinkItem">
|
|
<Link href="https://github.com/jedmund/hensei-api">
|
|
<a
|
|
href="https://github.com/jedmund/hensei-api"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<div className="Left">
|
|
<GithubIcon />
|
|
<h3>jedmund/hensei-api</h3>
|
|
</div>
|
|
<ShareIcon className="ShareIcon" />
|
|
</a>
|
|
</Link>
|
|
</li>
|
|
<li className="LinkItem">
|
|
<Link href="https://github.com/jedmund/hensei-web">
|
|
<a
|
|
href="https://github.com/jedmund/hensei-web"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<div className="Left">
|
|
<GithubIcon />
|
|
<h3>jedmund/hensei-web</h3>
|
|
</div>
|
|
<ShareIcon className="ShareIcon" />
|
|
</a>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</Dialog.Content>
|
|
</div>
|
|
</Dialog.Overlay>
|
|
</Dialog.Portal>
|
|
</Dialog.Root>
|
|
)
|
|
}
|
|
|
|
export default AboutModal
|