kopia lustrzana https://github.com/gabipurcaru/followgraph
139 wiersze
5.1 KiB
TypeScript
139 wiersze
5.1 KiB
TypeScript
import React, { useState } from 'react'
|
|
export function FAQ({}) {
|
|
return (
|
|
<section className="bg-white dark:bg-gray-900 pt-12">
|
|
<div
|
|
className="max-w-screen-xl px-4 pb-8 mx-auto lg:pb-24 lg:px-6"
|
|
id="faq"
|
|
>
|
|
<h2 className="mb-6 text-3xl font-extrabold tracking-tight text-center text-gray-900 lg:mb-8 lg:text-3xl dark:text-white">
|
|
Frequently asked questions
|
|
</h2>
|
|
<div className="max-w-screen-md mx-auto">
|
|
<div
|
|
id="accordion-flush"
|
|
data-accordion="collapse"
|
|
data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
|
|
data-inactive-classes="text-gray-500 dark:text-gray-400"
|
|
>
|
|
<FAQItem
|
|
defaultSelected
|
|
title="How does Followgraph for Mastodon work?"
|
|
>
|
|
Followgraph looks up all the people you follow on Mastodon, and
|
|
then the people <em>they</em> follow. Then it sorts them by the
|
|
number of mutuals, or otherwise by how popular those accounts are.
|
|
<br />
|
|
It then shows the list with Mastodon links to follow them.
|
|
</FAQItem>
|
|
|
|
<FAQItem title="Do I need to grant Followgraph any permissions?">
|
|
Not at all! Followgraph uses public APIs to fetch potential people
|
|
you can follow on Mastodon. In fact, it only does inauthenticated
|
|
network requests to various Mastodon instances.
|
|
</FAQItem>
|
|
|
|
<FAQItem title="Help! The search got stuck.">
|
|
Don't worry. The list of suggestions will load in 30 seconds
|
|
or so. Sometimes it gets stuck because one or more of the queries
|
|
made to Mastodon time out. This is not a problem, because the rest
|
|
of the queries will work as expected.
|
|
</FAQItem>
|
|
|
|
<FAQItem title="Why don't I see any results?">
|
|
There could be a few reasons:
|
|
<ul className="list-disc ml-4">
|
|
<li>
|
|
Followgraph only works if your list of follows is public. If
|
|
you've opted to hide your social graph in your Mastodon
|
|
preferences, you will not see any results here.
|
|
</li>
|
|
<li>
|
|
Due to the high volume of requests, sometimes Mastodon
|
|
throttles this tool. If that's the case, try again a bit
|
|
later.
|
|
</li>
|
|
<li>
|
|
Make sure you have no typos in the Mastodon handle, and make
|
|
sure you follow at least a few people to seed the search.
|
|
</li>
|
|
</ul>
|
|
</FAQItem>
|
|
|
|
<FAQItem title="How can I contribute with suggestions?">
|
|
Click the "Fork me on Github" link on the top right, and
|
|
open up an issue.
|
|
</FAQItem>
|
|
|
|
<FAQItem title="Why is this not a core Mastodon feature?">
|
|
Well, maybe it should be. In the meantime, you can use this
|
|
website.
|
|
</FAQItem>
|
|
|
|
<FAQItem title="Can I download the list of accounts as CSV?">
|
|
While it would be a useful feature, Followgraph does <em>not</em>{' '}
|
|
plan to offer this functionality as it would facilitate inorganic
|
|
and potentially malicious behaviour.
|
|
</FAQItem>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function FAQItem({
|
|
defaultSelected,
|
|
title,
|
|
children,
|
|
}: {
|
|
defaultSelected?: boolean
|
|
title: string
|
|
children: React.ReactNode
|
|
}) {
|
|
const [selected, setSelected] = useState(defaultSelected)
|
|
return (
|
|
<>
|
|
<h3 id="accordion-flush-heading-1">
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelected(!selected)}
|
|
className={`flex items-center justify-between w-full py-5 font-medium text-left text-gray-${
|
|
selected ? 900 : 500
|
|
} bg-white border-b border-gray-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-${
|
|
selected ? 200 : 400
|
|
}`}
|
|
data-accordion-target="#accordion-flush-body-1"
|
|
aria-expanded="true"
|
|
aria-controls="accordion-flush-body-1"
|
|
>
|
|
<span>{title}</span>
|
|
<svg
|
|
data-accordion-icon
|
|
className="w-6 h-6 rotate-180 shrink-0"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</h3>
|
|
{selected ? (
|
|
<div
|
|
id="accordion-flush-body-1"
|
|
aria-labelledby="accordion-flush-heading-1"
|
|
>
|
|
<div className="py-5 border-b border-gray-200 dark:border-gray-700 dark:text-gray-300">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
)
|
|
}
|