60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
|
import { clsx } from 'clsx'
|
||
|
|
import { Show } from 'solid-js'
|
||
|
|
|
||
|
|
import { useLocalize } from '../../../context/localize'
|
||
|
|
import { useSession } from '../../../context/session'
|
||
|
|
import styles from './Placeholder.module.scss'
|
||
|
|
|
||
|
|
export type PlaceholderProps = {
|
||
|
|
type: 'feed' | 'feedCollaborations' | 'feedDiscussions'
|
||
|
|
}
|
||
|
|
|
||
|
|
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'),
|
||
|
|
},
|
||
|
|
feedCollaborations: {
|
||
|
|
image: 'placeholder-experts.webp',
|
||
|
|
header: t('Find collaborators'),
|
||
|
|
text: t('Placeholder feedCollaborations'),
|
||
|
|
buttonLabel: t('Find co-authors'),
|
||
|
|
},
|
||
|
|
feedDiscussions: {
|
||
|
|
image: 'placeholder-discussions.webp',
|
||
|
|
header: t('Participate in discussions'),
|
||
|
|
text: t('Placeholder feedDiscussions'),
|
||
|
|
buttonLabel: author() ? t('Current discussions') : t('Enter'),
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div class={clsx(styles.placeholder, styles[`placeholder-${props.type}`])}>
|
||
|
|
<div class={styles.placeholderCover}>
|
||
|
|
<img src={`/public/${data[props.type].image}`} />
|
||
|
|
</div>
|
||
|
|
<div class={styles.placeholderContent}>
|
||
|
|
<h3 innerHTML={data[props.type].header} />
|
||
|
|
<p innerHTML={data[props.type].text} />
|
||
|
|
|
||
|
|
<Show
|
||
|
|
when={author()}
|
||
|
|
fallback={
|
||
|
|
<a class={styles.button} href="?m=auth&mode=login">
|
||
|
|
{data[props.type].buttonLabel}
|
||
|
|
</a>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<button>{data[props.type].buttonLabel}</button>
|
||
|
|
</Show>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|