mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-20 19:51:27 +10:00
abd24e7eb7
Added an ability to customize font sizes. This is set at a new section in the settings. The controler for this sets a number of css variables which are used in css rules that override tailwind's text-<size> to use the font size and line spacing contained in the variable. The control itself is a simple logarithmic slider that controls a "scale factor" by which all the text sizes in a resume are scaled by.
41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
import React, { memo, useContext } from 'react';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import PageContext from '../../../contexts/PageContext';
|
|
import { formatDate, safetyCheck } from '../../../utils';
|
|
|
|
const AwardItem = ({ item, language }) => (
|
|
<div>
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex flex-col text-left mr-2">
|
|
<h6 className="font-semibold text-sm">{item.title}</h6>
|
|
<span className="text-xs">{item.awarder}</span>
|
|
</div>
|
|
{item.date && (
|
|
<h6 className="text-xs font-medium text-right">
|
|
{formatDate({ date: item.date, language })}
|
|
</h6>
|
|
)}
|
|
</div>
|
|
{item.summary && (
|
|
<ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
const AwardsA = () => {
|
|
const { data, heading: Heading } = useContext(PageContext);
|
|
|
|
return safetyCheck(data.awards) ? (
|
|
<div>
|
|
<Heading>{data.awards.heading}</Heading>
|
|
<div className="grid gap-4">
|
|
{data.awards.items.map((x) => (
|
|
<AwardItem key={x.id} item={x} language={data.metadata.language} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null;
|
|
};
|
|
|
|
export default memo(AwardsA);
|