webapp/src/components/Feed/Placeholder/Placeholder.tsx

115 lines
3.3 KiB
TypeScript
Raw Normal View History

2024-05-10 16:52:13 +00:00
import { clsx } from 'clsx'
2024-05-11 17:27:57 +00:00
import { For, Show } from 'solid-js'
2024-05-10 16:52:13 +00:00
import { useLocalize } from '../../../context/localize'
import { useSession } from '../../../context/session'
import styles from './Placeholder.module.scss'
2024-05-11 17:27:57 +00:00
import {Icon} from "../../_shared/Icon";
2024-05-10 16:52:13 +00:00
export type PlaceholderProps = {
2024-05-11 17:27:57 +00:00
type: string,
mode: 'feed' | 'profile'
2024-05-10 16:52:13 +00:00
}
export const Placeholder = (props: PlaceholderProps) => {
const { t } = useLocalize()
const { author } = useSession()
const data = {
feed: {
image: 'placeholder-feed.webp',
header: t('Feed settings'),
text: t('Placeholder feed'),
buttonLabel: author() ? t('Popular authors') : t('Create own feed'),
href: '/authors?by=followers',
2024-05-10 16:52:13 +00:00
},
feedCollaborations: {
image: 'placeholder-experts.webp',
header: t('Find collaborators'),
text: t('Placeholder feedCollaborations'),
buttonLabel: t('Find co-authors'),
href: '/authors?by=name',
2024-05-10 16:52:13 +00:00
},
feedDiscussions: {
image: 'placeholder-discussions.webp',
header: t('Participate in discussions'),
text: t('Placeholder feedDiscussions'),
buttonLabel: author() ? t('Current discussions') : t('Enter'),
href: '/feed?by=last_comment',
2024-05-10 16:52:13 +00:00
},
2024-05-11 17:27:57 +00:00
author: {
image: 'placeholder-join.webp',
header: t('Join our team of authors'),
text: t('Join our team of authors text'),
buttonLabel: t('Create post'),
href: '/create',
profileLinks: [
{
href: '/how-to-write-a-good-article',
label: t('How to write a good article')
}
]
},
authorComments: {
image: 'placeholder-discussions.webp',
header: t('Join discussions'),
text: t('Placeholder feedDiscussions'),
buttonLabel: t('Go to discussions'),
href: '/feed?by=last_comment',
profileLinks: [
{
href: '/about/discussion-rules',
label: t('Discussion rules')
},
{
href: '/about/discussion-rules#ban',
label: t('Block rules')
}
]
},
2024-05-10 16:52:13 +00:00
}
return (
2024-05-11 17:27:57 +00:00
<div class={clsx(styles.placeholder, styles[`placeholder--${props.type}`], styles[`placeholder--${props.mode}-mode`])}>
2024-05-10 16:52:13 +00:00
<div class={styles.placeholderCover}>
<img src={`/public/${data[props.type].image}`} />
</div>
<div class={styles.placeholderContent}>
2024-05-11 17:27:57 +00:00
<div>
<h3 innerHTML={data[props.type].header}/>
<p innerHTML={data[props.type].text}/>
</div>
<Show when={data[props.type].profileLinks}>
<div class={styles.bottomLinks}>
<For each={data[props.type].profileLinks}>
{(link) => (
<a href={link.href}>
<Icon name="link-white" class={styles.icon}/>
{link.label}
</a>
)}
</For>
</div>
</Show>
2024-05-10 16:52:13 +00:00
<Show
when={author()}
fallback={
<a class={styles.button} href="?m=auth&mode=login">
{data[props.type].buttonLabel}
</a>
}
>
2024-05-11 17:27:57 +00:00
<a class={styles.button} href={data[props.type].href}>
{data[props.type].buttonLabel}
<Show when={props.mode === 'profile'}>
<Icon name="arrow-right-2" class={styles.icon}/>
</Show>
</a>
2024-05-10 16:52:13 +00:00
</Show>
</div>
</div>
)
}