Emoji component in TranslatathonPrizes

Author: corwintines

src/components/Translatathon/TranslatathonPrizes.tsx

@@ -1,169 +1,13 @@
-const GoldMedal = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
-      viewBox="0 0 64 64"
-      fill="none"
-    >
-      <g clip-path="url(#clip0_313_5104)">
-        <path
-          d="M32 14.2222L19.5556 0H0L24.8889 30.2222L45.3707 21.7778L32 14.2222Z"
-          fill="#55ACEE"
-        />
-        <path
-          d="M44.4444 0L32 14.2222L41.5822 27.2213L43.7636 24.5742L64 0H44.4444Z"
-          fill="#3B88C3"
-        />
-        <path
-          d="M41.2534 28.4907C41.3956 28.1049 41.4863 27.6942 41.4863 27.2587C41.4863 25.296 39.8934 23.7031 37.9308 23.7031H26.0783C24.1139 23.7031 22.5228 25.296 22.5228 27.2587C22.5228 27.6942 22.6116 28.1049 22.7556 28.4907C16.9636 31.7369 13.0419 37.9253 13.0419 45.0365C13.0401 55.5093 21.5308 64 32.0037 64C42.4765 64 50.9672 55.5093 50.9672 45.0365C50.9672 37.9253 47.0454 31.7369 41.2534 28.4907Z"
-          fill="#FFAC33"
-        />
-        <path
-          d="M34.4959 33.0669H31.4364L26.583 36.8571C26.4835 36.9567 26.3839 37.2233 26.3839 37.3549V39.4491C26.3839 39.7798 26.6506 40.0785 26.983 40.0785H30.1741V55.0367C30.1741 55.3709 30.4408 55.6678 30.8052 55.6678H34.4959C34.8266 55.6678 35.0932 55.3691 35.0932 55.0367V33.6962C35.0932 33.3656 34.8284 33.0669 34.4959 33.0669Z"
-          fill="#9E5200"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_313_5104">
-          <rect width="64" height="64" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  )
-}
-
-const SilverMedal = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="44"
-      height="44"
-      viewBox="0 0 44 44"
-      fill="none"
-    >
-      <g clip-path="url(#clip0_313_5109)">
-        <path
-          d="M22 9.77778L13.4444 0H0L17.1111 20.7778L31.1923 14.9722L22 9.77778Z"
-          fill="#55ACEE"
-        />
-        <path
-          d="M30.5556 0L22 9.77778L28.5878 18.7147L30.0874 16.8948L44 0H30.5556Z"
-          fill="#3B88C3"
-        />
-        <path
-          d="M28.3616 19.5873C28.4594 19.3221 28.5217 19.0398 28.5217 18.7403C28.5217 17.391 27.4266 16.2959 26.0773 16.2959H17.9287C16.5782 16.2959 15.4843 17.391 15.4843 18.7403C15.4843 19.0398 15.5454 19.3221 15.6444 19.5873C11.6624 21.8191 8.96619 26.0737 8.96619 30.9626C8.96496 38.1627 14.8023 44 22.0024 44C29.2025 44 35.0399 38.1627 35.0399 30.9626C35.0399 26.0737 32.3436 21.8191 28.3616 19.5873Z"
-          fill="#CCD6DD"
-        />
-        <path
-          d="M26.8913 35.348H22.561C23.6341 33.8398 25.509 31.3953 26.2399 30.0912C26.7886 29.0169 27.1309 28.3324 27.1309 27.1212C27.1309 24.5839 25.212 22.5049 21.9438 22.5049C19.2243 22.5049 17.3726 24.744 17.3726 24.744C17.2125 24.9273 17.2358 25.2011 17.3959 25.3392L18.7904 26.7558C18.9725 26.9391 19.2475 26.9391 19.4296 26.7558C19.8635 26.2754 20.7093 25.613 21.6455 25.613C22.9252 25.613 23.6573 26.3891 23.6573 27.2581C23.6573 27.8973 23.3603 28.5378 23.0633 28.9949C21.714 31.0507 18.3321 35.645 17.0072 37.3818V37.8389C17.0072 38.0687 17.1893 38.2728 17.4411 38.2728H26.8913C27.1186 38.2728 27.3252 38.0674 27.3252 37.8389V35.7831C27.3264 35.5533 27.1186 35.348 26.8913 35.348Z"
-          fill="#627077"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_313_5109">
-          <rect width="44" height="44" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  )
-}
-
-const BronzeMedal = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="44"
-      height="44"
-      viewBox="0 0 44 44"
-      fill="none"
-    >
-      <g clip-path="url(#clip0_313_5114)">
-        <path
-          d="M22 9.77778L13.4444 0H0L17.1111 20.7778L31.1923 14.9722L22 9.77778Z"
-          fill="#55ACEE"
-        />
-        <path
-          d="M30.5556 0L22 9.77778L28.5878 18.7147L30.0874 16.8948L44 0H30.5556Z"
-          fill="#3B88C3"
-        />
-        <path
-          d="M28.3616 19.5873C28.4594 19.3221 28.5217 19.0398 28.5217 18.7403C28.5217 17.391 27.4266 16.2959 26.0773 16.2959H17.9287C16.5782 16.2959 15.4843 17.391 15.4843 18.7403C15.4843 19.0398 15.5454 19.3221 15.6444 19.5873C11.6624 21.8191 8.96619 26.0737 8.96619 30.9626C8.96496 38.1627 14.8023 44 22.0024 44C29.2025 44 35.0399 38.1627 35.0399 30.9626C35.0399 26.0737 32.3436 21.8191 28.3616 19.5873Z"
-          fill="#FF8A3B"
-        />
-        <path
-          d="M17.2591 35.8721L18.6988 34.4323C18.8577 34.271 19.0875 34.249 19.2696 34.3859C19.2696 34.3859 20.6862 35.4382 21.7825 35.4382C22.7664 35.4382 23.7723 34.6157 23.7723 33.6098C23.7723 32.6039 22.7432 31.7593 21.0528 31.7593H20.2718C20.0445 31.7593 19.8392 31.554 19.8392 31.3254V29.4286C19.8392 29.1768 20.0445 28.9947 20.2718 28.9947H21.0528C22.6527 28.9947 23.4973 28.2186 23.4973 27.2359C23.4973 26.252 22.6527 25.5223 21.6688 25.5223C20.663 25.5223 20.0237 26.0479 19.6815 26.4353C19.5202 26.6187 19.2476 26.6187 19.0655 26.4598L17.671 25.0884C17.4864 24.9271 17.5096 24.6546 17.671 24.4944C17.671 24.4944 19.5446 22.4827 22.0343 22.4827C24.6853 22.4827 26.9708 24.1058 26.9708 26.6651C26.9708 28.4239 25.6447 29.7268 24.6168 30.2059V30.2756C25.6912 30.7327 27.3815 32.1492 27.3815 34.1146C27.3815 36.6054 25.2108 38.4803 22.0563 38.4803C19.1792 38.4803 17.715 37.0626 17.2358 36.4466C17.0977 36.2828 17.1222 36.031 17.2591 35.8721Z"
-          fill="#7C4119"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_313_5114">
-          <rect width="44" height="44" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  )
-}
-
-const Star = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="36"
-      height="36"
-      viewBox="0 0 36 36"
-      fill="none"
-    >
-      <path
-        d="M27.287 34.6269C26.883 34.6269 26.481 34.5029 26.135 34.2559L18 28.4219L9.865 34.2559C9.172 34.7519 8.242 34.7519 7.553 34.2479C6.864 33.7489 6.574 32.8629 6.832 32.0539L9.866 22.2619L1.804 16.5809C1.119 16.0759 0.833998 15.1879 1.096 14.3779C1.36 13.5699 2.112 13.0209 2.962 13.0149L12.947 12.9999L16.126 3.4509C16.394 2.6419 17.149 2.0979 18 2.0979C18.851 2.0979 19.606 2.6429 19.875 3.4509L23 12.9999L33.036 13.0149C33.889 13.0209 34.642 13.5709 34.903 14.3779C35.166 15.1879 34.881 16.0759 34.195 16.5809L26.133 22.2619L29.167 32.0539C29.427 32.8629 29.134 33.7489 28.447 34.2479C28.1 34.5019 27.694 34.6269 27.287 34.6269Z"
-        fill="#FFAC33"
-      />
-    </svg>
-  )
-}
-
-const Scroll = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="36"
-      height="36"
-      viewBox="0 0 36 36"
-      fill="none"
-    >
-      <g clip-path="url(#clip0_313_5138)">
-        <path
-          d="M32 0H10C7.791 0 6 1.791 6 4V28H4C1.791 28 0 29.791 0 32C0 34.209 1.791 36 4 36H28C30.209 36 32 34.209 32 32V8C34.209 8 36 6.209 36 4C36 1.791 34.209 0 32 0Z"
-          fill="#FFD983"
-        />
-        <path d="M8 10H32V8H10L8 7V10Z" fill="#E39F3D" />
-        <path
-          d="M10 0C7.791 0 6 1.791 6 4V28.555C5.41 28.211 4.732 28 4 28C1.791 28 0 29.791 0 32C0 34.209 1.791 36 4 36C6.209 36 8 34.209 8 32V7.445C8.59 7.789 9.268 8 10 8C12.209 8 14 6.209 14 4C14 1.791 12.209 0 10 0Z"
-          fill="#FFE8B6"
-        />
-        <path
-          d="M12 4C12 5.104 11.104 6 10 6C8.896 6 8 5.104 8 4C8 2.896 8.896 2 10 2C11.104 2 12 2.896 12 4ZM6 32C6 33.104 5.104 34 4 34C2.896 34 2 33.104 2 32C2 30.896 2.896 30 4 30C5.104 30 6 30.896 6 32ZM30 15C30 15.552 29.553 16 29 16H11C10.448 16 10 15.552 10 15C10 14.448 10.448 14 11 14H29C29.553 14 30 14.448 30 15ZM30 19C30 19.553 29.553 20 29 20H11C10.448 20 10 19.553 10 19C10 18.447 10.448 18 11 18H29C29.553 18 30 18.447 30 19ZM30 23C30 23.553 29.553 24 29 24H11C10.448 24 10 23.553 10 23C10 22.447 10.448 22 11 22H29C29.553 22 30 22.447 30 23ZM30 27C30 27.553 29.553 28 29 28H11C10.448 28 10 27.553 10 27C10 26.447 10.448 26 11 26H29C29.553 26 30 26.447 30 27Z"
-          fill="#C1694F"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_313_5138">
-          <rect width="36" height="36" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  )
-}
+import Emoji from "@/components/Emoji"
 
 const TranslatathonPrizes = () => {
   return (
     <div className="flex w-full flex-col gap-8 rounded-lg">
       <div className="m-0 py-4 sm:m-auto">
         <div className="flex flex-row gap-4">
           <div className="flex h-32 w-32 items-center justify-center rounded-lg p-1 shadow-md">
-            <div className="h-16 w-16">
-              <GoldMedal />
+            <div className="h-16 w-16 items-center justify-center">
+              <Emoji text="🥇" fontSize={64} />
             </div>
           </div>
           <div className="flex flex-col items-center justify-center">
@@ -176,7 +20,12 @@ const TranslatathonPrizes = () => {
         <div className="justify-left flex flex-1 items-center gap-4 py-4 sm:justify-center">
           <div className="flex h-24 w-24 items-center justify-center rounded-lg p-1 shadow-md">
             <div className="h-11 w-11">
-              <SilverMedal />
+              <Emoji
+                text="🥈"
+                fontSize={44}
+                alignContent="center"
+                justifyItems="center"
+              />
             </div>
           </div>
           <div className="flex flex-col items-center justify-center">
@@ -187,7 +36,7 @@ const TranslatathonPrizes = () => {
         <div className="justify-left flex flex-1 items-center gap-4 sm:justify-center">
           <div className="flex h-24 w-24 items-center justify-center rounded-lg p-1 shadow-md">
             <div className="h-11 w-11">
-              <BronzeMedal />
+              <Emoji text="🥉" fontSize={44} />
             </div>
           </div>
           <div className="flex flex-col items-center justify-center">
@@ -200,7 +49,7 @@ const TranslatathonPrizes = () => {
         <div className="justify-left flex flex-1 items-center gap-4 sm:justify-center">
           <div className="flex h-16 w-16 items-center justify-center rounded-lg p-1 shadow-md">
             <div className="h-9 w-9">
-              <Star />
+              <Emoji text="🌟" fontSize={36} />
             </div>
           </div>
           <div className="flex flex-col items-center justify-center">
@@ -211,7 +60,7 @@ const TranslatathonPrizes = () => {
         <div className="justify-left flex flex-1 items-center gap-4 sm:justify-center">
           <div className="flex h-16 w-16 items-center justify-center rounded-lg p-1 shadow-md">
             <div className="h-9 w-9">
-              <Scroll />
+              <Emoji text=":scroll:" fontSize={36} />
             </div>
           </div>
           <div className="flex flex-col items-center justify-center">