autosort creator codes

Author: thelindat

components/CreatorCode.tsx

@@ -9,7 +9,7 @@ interface Props {
     percentOff: number;
 }
 
-const CreatorCode: React.FC<Props> = ({storeName, storeLink, storeImage, code, percentOff}) => {
+const CreatorCode: React.FC<Props> = ([storeName, storeLink, code, percentOff, storeImage]) => {
     const [copied, setCopied] = React.useState(false)
 
     function copyCode() {

components/CreatorCodes.tsx

@@ -1,8 +1,11 @@
-const CreatorCodes: React.FC<{children: React.ReactNode}> = ({children}) => {
+import CreatorCode from '@components/CreatorCode'
 
-    return <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 grid-cols-1 mt-4 gap-4">
-        {children}
-    </div>
+function CreatorCodes (data: [string, string, string, number, string][]) {
+    return (<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 grid-cols-1 mt-4 gap-4">
+        {data
+            .sort((a, b) => a[0].localeCompare(b[0]))
+            .map((creator) => CreatorCode(creator))}
+    </div>)
 }
 
 export default CreatorCodes

pages/index.mdx

@@ -42,19 +42,18 @@ Creator codes allow Tebex stores to share a percentage of a purchase with us, wh
 
 More information about these creators is available in our [Discord](https://discord.com/channels/813030955598086174/1028912864389496903).
 
-<CreatorCodes>
-  <CreatorCode storeName="Andyyy" storeLink="https://andyyy.tebex.io/" code="ox20" percentOff={20} storeImage="/static/creators/andy.png"/>
-  <CreatorCode storeName="Berkie's Workshop" storeLink="https://berkie.tebex.io/" code="ox10" percentOff={10} storeImage="/static/creators/berkie.png"/>
-  <CreatorCode storeName="Dolu Mods" storeLink="https://dolu.tebex.io/" code="overextended" percentOff={25} storeImage="/static/creators/dolu.png"/>
-  <CreatorCode storeName="Electus Scripts" storeLink="https://store.electus-scripts.com/" code="ox10" percentOff={10} storeImage="/static/creators/electus.png"/>
-  <CreatorCode storeName="Loaf Scripts" storeLink="https://store.loaf-scripts.com/" code="ox10" percentOff={10} storeImage="/static/creators/loaf.png"/>
-  <CreatorCode storeName="OT Studios" storeLink="https://store.otstudios.net/ox" code="ox10" percentOff={10} storeImage="/static/creators/otstudios.png"/>
-  <CreatorCode storeName="Randolio Scripts" storeLink="https://randolio.tebex.io/" code="OVEREXTENDED" percentOff={20} storeImage="/static/creators/randolio.png"/>
-  <CreatorCode storeName="rcore" storeLink="https://store.rcore.cz/" code="ox10" percentOff={10} storeImage="/static/creators/rcore.png"/>
-  <CreatorCode storeName="Artwork Inventory" storeLink="https://artwork-inventory.tebex.io/" code="ox10" percentOff={10} storeImage="/static/creators/artworkInventory.gif"/>
-  <CreatorCode storeName="Renewed Scripts" storeLink="https://renewed.tebex.io/ox" code="ox15" percentOff={15} storeImage="/static/creators/renewed.png"/>
-  <CreatorCode storeName="Wasabi Scripts" storeLink="https://store.wasabiscripts.com/ox" code="OX20" percentOff={20} storeImage="/static/creators/wasabi.png"/>
-</CreatorCodes>
-
+{CreatorCodes([
+  ["Andyyy", "https://andyyy.tebex.io/", "ox20", 20 , "/static/creators/andy.png"],
+  ["Berkie's Workshop", "https://berkie.tebex.io/", "ox10", 10 , "/static/creators/berkie.png"],
+  ["Dolu Mods", "https://dolu.tebex.io/", "overextended", 25 , "/static/creators/dolu.png"],
+  ["Electus Scripts", "https://store.electus-scripts.com/", "ox10", 10 , "/static/creators/electus.png"],
+  ["Loaf Scripts", "https://store.loaf-scripts.com/", "ox10", 10 , "/static/creators/loaf.png"],
+  ["OT Studios", "https://store.otstudios.net/ox", "ox10", 10 , "/static/creators/otstudios.png"],
+  ["Randolio Scripts", "https://randolio.tebex.io/", "OVEREXTENDED", 20 , "/static/creators/randolio.png"],
+  ["rcore", "https://store.rcore.cz/", "ox10", 10 , "/static/creators/rcore.png"],
+  ["Artwork Inventory", "https://artwork-inventory.tebex.io/", "ox10", 10 , "/static/creators/artworkInventory.gif"],
+  ["Renewed Scripts", "https://renewed.tebex.io/ox", "ox15", 15 , "/static/creators/renewed.png"],
+  ["Wasabi Scripts", "https://store.wasabiscripts.com/ox", "OX20", 20 , "/static/creators/wasabi.png"]
+])}
 
 You can apply a creator code at checkout under "Support A Creator".