2021-07-25 09:02:11 +02:00
|
|
|
import { FC, useCallback, useMemo } from 'react';
|
2021-08-17 05:38:07 +02:00
|
|
|
import { GetConfigurationManager, LocalizeText } from '../../../../../api';
|
2021-07-25 09:02:11 +02:00
|
|
|
import { WidgetContainerViewProps } from './WidgetContainerView.types';
|
|
|
|
|
|
|
|
export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
|
|
|
|
{
|
|
|
|
const { conf = null } = props;
|
|
|
|
|
|
|
|
const config = useMemo(() =>
|
|
|
|
{
|
|
|
|
const config = {};
|
|
|
|
|
|
|
|
if(!conf || !conf.length) return config;
|
|
|
|
|
2021-08-16 08:00:31 +02:00
|
|
|
let options = conf.split(',');
|
2021-07-25 09:02:11 +02:00
|
|
|
|
|
|
|
options.forEach(option =>
|
|
|
|
{
|
|
|
|
let [ key, value ] = option.split(':');
|
|
|
|
|
|
|
|
if(key && value) config[key] = value;
|
|
|
|
});
|
|
|
|
|
|
|
|
return config;
|
|
|
|
}, [ conf ]);
|
|
|
|
|
|
|
|
const getOption = useCallback((key: string) =>
|
|
|
|
{
|
|
|
|
const option = config[key];
|
|
|
|
|
|
|
|
if(!option) return null;
|
|
|
|
|
|
|
|
switch(key)
|
|
|
|
{
|
|
|
|
case 'image':
|
|
|
|
return GetConfigurationManager().interpolate(option);
|
|
|
|
}
|
|
|
|
|
|
|
|
return option;
|
|
|
|
}, [ config ]);
|
|
|
|
|
|
|
|
return (
|
2021-07-25 10:19:09 +02:00
|
|
|
<div className="widgetcontainer widget d-flex flex-row overflow-hidden">
|
|
|
|
<div className="widgetcontainer-image flex-shrink-0" style={{ backgroundImage: `url(${getOption('image')})` }} />
|
|
|
|
<div className="d-flex flex-column align-self-center">
|
|
|
|
<h3 className="my-0">{LocalizeText(`landing.view.${getOption('texts')}.header`)}</h3>
|
|
|
|
<i>{ LocalizeText(`landing.view.${getOption('texts')}.body`) }</i>
|
|
|
|
<button className="btn btn-sm btn-gainsboro align-self-start px-3 mt-auto">{ LocalizeText(`landing.view.${getOption('texts')}.button`) }</button>
|
|
|
|
</div>
|
2021-07-25 09:02:11 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|