EvalueTonSavoir/client/src/components/GiftTemplate/templates/GlobalFeedbackTemplate.ts
2025-01-25 02:02:18 -05:00

26 lines
911 B
TypeScript

import { TemplateOptions } from './types';
import {textType} from './TextTypeTemplate';
import { state } from '.';
import { theme } from '../constants';
import { TextFormat } from 'gift-pegjs';
type GlobalFeedbackOptions = TemplateOptions & TextFormat;
export default function GlobalFeedbackTemplate({ format, text }: GlobalFeedbackOptions): string {
const Container = `
position: relative;
margin-top: 1rem;
padding: 0 1rem;
background-color: ${theme(state.theme, 'beige100', 'black400')};
color: ${theme(state.theme, 'beige900', 'gray200')};
border: ${theme(state.theme, 'beige300', 'black300')} ${state.theme === 'light' ? 1 : 2}px solid;
border-radius: 6px;
box-shadow: 0px 2px 5px ${theme(state.theme, 'gray400', 'black800')};
`;
return (format && text)
? `<div style="${Container}">
<p>${textType({format: format, text: text})}</p>
</div>`
: ``;
}