From e3ec9810f8d5021cf0174aefb6c75875701404c8 Mon Sep 17 00:00:00 2001
From: Mosh Hamedani <programmingwithmosh@gmail.com>
Date: Wed, 1 Mar 2023 09:29:01 -0800
Subject: [PATCH] Get optimized images

---
 src/components/GameCard.tsx | 3 ++-
 src/services/image-url.ts   | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 src/services/image-url.ts

diff --git a/src/components/GameCard.tsx b/src/components/GameCard.tsx
index d5c8a49..14b0a7b 100644
--- a/src/components/GameCard.tsx
+++ b/src/components/GameCard.tsx
@@ -1,6 +1,7 @@
 import { Card, CardBody, Heading, HStack, Image, Text } from '@chakra-ui/react'
 import React from 'react'
 import { Game } from '../hooks/useGames'
+import getCroppedImageUrl from '../services/image-url'
 import CriticScore from './CriticScore'
 import PlatformIconList from './PlatformIconList'
 
@@ -11,7 +12,7 @@ interface Props {
 const GameCard = ({ game }: Props) => {
   return (
     <Card borderRadius={10} overflow='hidden'>
-      <Image src={game.background_image} />
+      <Image src={getCroppedImageUrl(game.background_image)} />
       <CardBody>
         <Heading fontSize='2xl'>{game.name}</Heading>
         <HStack justifyContent='space-between'>
diff --git a/src/services/image-url.ts b/src/services/image-url.ts
new file mode 100644
index 0000000..edfd039
--- /dev/null
+++ b/src/services/image-url.ts
@@ -0,0 +1,8 @@
+
+const getCroppedImageUrl = (url: string) => {
+  const target = 'media/';
+  const index = url.indexOf(target) + target.length;
+  return url.slice(0, index) + 'crop/600/400/' + url.slice(index);
+}
+
+export default getCroppedImageUrl;
\ No newline at end of file