Spaces:
Sleeping
Sleeping
File size: 4,851 Bytes
b369d17 75844ad b369d17 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
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 Hugging Face work?"
>
Followgraph looks up all the people you follow on Hugging Face,
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 Hugging Face 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 Hugging Face. In fact, it only does
inauthenticated network requests.
</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 Hugging Face 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?">
Make sure you have no typos in the Hugging Face handle, and make
sure you follow at least a few people to seed the search.
</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 Hugging Face 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>
<FAQItem title="Why don't I see Hugging Face staff members?">
Followgraph does not include Hugging Face staff members to
increase the diversity of the suggestions, and promote the
discovery of new accounts.
</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}
</>
)
}
|