File size: 5,214 Bytes
ec4551b | 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 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | 'use client';
import { FC, useCallback, useState } from 'react';
import clsx from 'clsx';
import { useVariables } from '@gitroom/react/helpers/variable.context';
import { useUser } from '@gitroom/frontend/components/layout/user.context';
import { useT } from '@gitroom/react/translation/get.transation.service.client';
const useFaqList = () => {
const { isGeneral } = useVariables();
const user = useUser();
const t = useT();
return [
...(user?.allowTrial
? [
{
title: t(
'faq_am_i_going_to_be_charged_by_postiz',
'Am I going to be charged by Postiz?'
),
description: t(
'faq_to_confirm_credit_card_information_postiz_will_hold',
'To confirm credit card information Postiz will hold $2 and release it immediately, you can cancel your subscription anytime from settings without talking to a person'
),
},
]
: []),
{
title: t(
'faq_can_i_trust_postiz_gitroom',
`Can I trust ${isGeneral ? 'Postiz' : 'Gitroom'}?`
),
description: t(
'faq_postiz_gitroom_is_proudly_open_source',
`${
isGeneral ? 'Postiz' : 'Gitroom'
} is proudly open-source! We believe in an ethical and transparent culture, meaning that ${
isGeneral ? 'Postiz' : 'Gitroom'
} will live forever. You can check out the entire code or use it for personal projects. To view the open-source repository, <a href="https://github.com/gitroomhq/postiz-app" target="_blank" style="text-decoration: underline;">click here</a>.`
),
},
{
title: t('faq_what_are_channels', 'What are channels?'),
description: t(
'faq_postiz_gitroom_allows_you_to_schedule_posts',
`${
isGeneral ? 'Postiz' : 'Gitroom'
} allows you to schedule your posts between different channels.
A channel is a publishing platform where you can schedule your posts.
For example, you can schedule your posts on X, Facebook, Instagram, TikTok, YouTube, Reddit, Linkedin, Dribbble, Threads and Pinterest.`
),
},
{
title: t('faq_what_are_team_members', 'What are team members?'),
description: t(
'faq_if_you_have_a_team_with_multiple_members',
'If you have a team with multiple members, you can invite them to your workspace to collaborate on your posts and add their personal channels'
),
},
];
};
export const FAQSection: FC<{
title: string;
description: string;
}> = (props) => {
const { title, description } = props;
const [show, setShow] = useState(false);
const changeShow = useCallback(() => {
setShow(!show);
}, [show]);
return (
<div
className="bg-sixth p-[24px] border border-tableBorder rounded-[8px] flex flex-col"
onClick={changeShow}
>
<div className={`text-[20px] cursor-pointer flex justify-center`}>
<div className="flex-1">{title}</div>
<div className="flex items-center justify-center w-[32px]">
{!show ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M18 12.75H6C5.59 12.75 5.25 12.41 5.25 12C5.25 11.59 5.59 11.25 6 11.25H18C18.41 11.25 18.75 11.59 18.75 12C18.75 12.41 18.41 12.75 18 12.75Z"
fill="white"
/>
<path
d="M12 18.75C11.59 18.75 11.25 18.41 11.25 18V6C11.25 5.59 11.59 5.25 12 5.25C12.41 5.25 12.75 5.59 12.75 6V18C12.75 18.41 12.41 18.75 12 18.75Z"
fill="white"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
>
<path
d="M24 17H8C7.45333 17 7 16.5467 7 16C7 15.4533 7.45333 15 8 15H24C24.5467 15 25 15.4533 25 16C25 16.5467 24.5467 17 24 17Z"
fill="#ECECEC"
/>
</svg>
)}
</div>
</div>
<div
className={clsx(
'transition-all duration-500 overflow-hidden',
!show ? 'max-h-[0]' : 'max-h-[500px]'
)}
>
<div
onClick={(e) => {
e.stopPropagation();
}}
className={`mt-[16px] w-full text-wrap font-[400] text-[16px] text-customColor17 select-text max-w-[450px]`}
dangerouslySetInnerHTML={{
__html: description,
}}
/>
</div>
</div>
);
};
export const FAQComponent: FC = () => {
const t = useT();
const list = useFaqList();
return (
<div>
{/*<h3 className="text-[24px] mt-[48px] mb-[40px] tablet:mt-[80px]">*/}
{/* {t('frequently_asked_questions', 'Frequently Asked Questions')}*/}
{/*</h3>*/}
<div className="gap-[24px] flex-col flex select-none mt-[48px] mb-[40px] tablet:mt-[80px]">
{list.map((item, index) => (
<FAQSection key={index} {...item} />
))}
</div>
</div>
);
};
|