feat(Template): basic star rating display

frontend/components/Template.module.scss → frontend/components/templates/Template.module.scss

@@ -11,4 +11,13 @@
   line-clamp: 2;
   -webkit-box-orient: vertical;
     overflow: hidden;
+}
+
+.star {
+  --star-width: 1em;
+    width: var(--star-width);
+}
+.flipped {
+    transform: scaleX(-1);
+    margin-left: calc(-1 * var(--star-width) - 1px);
 }
\ No newline at end of file

frontend/components/Template.tsx → frontend/components/templates/Template.tsx

 import { FC } from 'react';
 import styles from './Template.module.scss';
 import clsx from 'clsx';
-import { Template as TemplateDto } from 'lib/client/dist/models/template';
+import { Template as TemplateDto } from 'lib/client/models/template';
 import Link from 'next/link';
+import { faStarHalf } from '@fortawesome/free-solid-svg-icons';
+import { faStarHalf as faStarHalfBorder } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+type RatingProps = { score: number; className?: string };
+const Rating: FC<RatingProps> = ({ score, className }) => {
+    const doubleScore = score * 2;
+
+    return (
+        <span className={className}>
+            {[...Array(10)].map((_, i) => (
+                <span
+                    key={i}
+                    className={clsx('text-yellow-500', 'text-xl', 'inline', 'align-text-bottom')}
+                >
+                    {i < doubleScore ? (
+                        <FontAwesomeIcon
+                            icon={faStarHalf}
+                            className={clsx(styles['star'], i % 2 == 1 ? styles['flipped'] : false)}
+                        />
+                    ) : (
+                        <FontAwesomeIcon
+                            icon={faStarHalfBorder}
+                            className={clsx(styles['star'], i % 2 == 1 ? styles['flipped'] : false)}
+                        />
+                    )}
+                </span>
+            ))}
+        </span>
+    );
+};
 
 type TemplateProps = {
     template: TemplateDto;
@@ -18,7 +49,8 @@ const Template: FC<TemplateProps> = ({ template }) => {
         >
             <div className="flex flex-row">
                 <div className="flex-grow">
-                    <h2 className="h6">{template.title}</h2>
+                    <h2 className="h6 inline">{template.title}</h2>{' '}
+                    {template.score && <Rating score={template.score} className="ml-2" />}
                     <p className={styles['summary']}>{template.summary}</p>
                 </div>
                 {template.picture && (

frontend/package.json

@@ -9,6 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@tailwindcss/forms": "^0.5.6",
     "@tanstack/react-query": "^4.35.3",
     "@tanstack/react-query-devtools": "^4.35.3",

frontend/pages/templates.tsx

 import { NextPage } from 'next';
 import Layout from 'components/Layout';
-import Template from 'components/Template';
+import Template from 'components/templates/Template';
 import { useQuery } from '@tanstack/react-query';
 import { useTemplateApi } from 'lib/useApi';
 import LoadingSpinner from '../components/LoadingSpinner';

frontend/styles/custom.scss

@@ -111,4 +111,8 @@ a {
 
 h1, .h1 {
     font-size: 2rem;
+}
+
+h2, .h2 {
+    font-size: 1.33rem;
 }
\ No newline at end of file

frontend/yarn.lock

@@ -37,6 +37,39 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz#1766039cad33f8ad87f9467b98e0d18fbc8f01c5"
+  integrity sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==
+
+"@fortawesome/fontawesome-svg-core@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz#37f4507d5ec645c8b50df6db14eced32a6f9be09"
+  integrity sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/free-regular-svg-icons@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz#aee79ed76ce5dd04931352f9d83700761b8b1b25"
+  integrity sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/free-solid-svg-icons@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz#33a02c4cb6aa28abea7bc082a9626b7922099df4"
+  integrity sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/react-fontawesome@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
+  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@humanwhocodes/config-array@^0.11.6":
   version "0.11.7"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.7.tgz#38aec044c6c828f6ed51d5d7ae3d9b9faf6dbb0f"