feat: add optionnal "required" param on TextBox and Selector inputs

src/components/Selector.tsx

@@ -23,6 +23,7 @@ interface SelectorProps {
   ) => ReactNode;
 
   disabled?: boolean;
+  required?: boolean;
 }
 
 export default function Selector({
@@ -36,6 +37,7 @@ export default function Selector({
   onChangeCallback,
   formatOptionLabel,
   disabled = false,
+  required = false,
 }: SelectorProps): JSX.Element {
   const [selectorValue, setSelectorValue] = useState<Option>();
 
@@ -56,7 +58,7 @@ export default function Selector({
   }
 
   return (
-    <div className={`input-field ${fieldClass}`}>
+    <div className={`input-field ${fieldClass} ${required && 'required'}`}>
       {label && (
         <label
           htmlFor={name}

src/components/TextBox.tsx

@@ -10,6 +10,7 @@ interface InputProps {
   inputClass?: string;
   value?: string;
   onChangeCallback?: (value) => void;
+  required?: boolean;
 }
 
 export default function TextBox({
@@ -22,6 +23,7 @@ export default function TextBox({
   inputClass = '',
   value,
   onChangeCallback,
+  required = false,
 }: InputProps): JSX.Element {
   const [inputValue, setInputValue] = useState<string>(value);
 
@@ -33,11 +35,11 @@ export default function TextBox({
   }
 
   return (
-    <div className={`input-field ${fieldClass}`}>
+    <div className={`input-field ${fieldClass} ${required && 'required'}`}>
       {label && (
         <label
           htmlFor={name}
-          title={`${name} field`}
+          title={label}
         >
           {label}
         </label>

src/styles/globals.scss

@@ -160,11 +160,23 @@ input::placeholder {
 }
 
 .input-field {
-  & label,
   & input,
   & select {
     width: 100%;
   }
+
+  & label {
+    position: relative;
+    width: fit-content;
+  }
+
+  &.required label::after {
+    content: '*';
+    position: absolute;
+    top: 0;
+    right: -0.75em;
+    color: $red;
+  }
 }
 
 .checkbox-field {

src/types/types.d.ts

@@ -1,11 +1,11 @@
-import { Category, User } from '@prisma/client';
+import { Category, Link, User } from '@prisma/client';
 import { Profile } from 'next-auth';
 
 export type CategoryWithLinks = Category & {
   author: User;
   links: LinkWithCategory[];
 };
-export type LinkWithCategory = LinkWithCategory & {
+export type LinkWithCategory = Link & {
   author: User;
   category: CategoryWithLinks;
 };