Add prefix

Author: owjs3901

apps/landing/src/app/page.tsx

@@ -4,6 +4,7 @@ import { CodeBoard } from '../components/CodeBoard'
 import { Container } from '../components/Container'
 import { Discord } from '../components/Discord'
 import { Header } from '../components/Header'
+import { IMAGE_PREFIX } from '../constants'
 
 export default function HomePage() {
   return (
@@ -12,7 +13,7 @@ export default function HomePage() {
       <Box mt="150px">
         <VStack alignItems="center" gap="50px" maxW="800px" mx="auto">
           <VStack alignItems="center" gap="24px">
-            <Image h="50px" src="/icon.svg" w="52px" />
+            <Image h="50px" src={IMAGE_PREFIX + '/icon.svg'} w="52px" />
             <Text color="$title" textAlign="center" typography="h1">
               Lorem ipsum dolor sit amet,
               <br />
@@ -38,7 +39,7 @@ export default function HomePage() {
               <Text color="$base" typography="buttonL">
                 Get started
               </Text>
-              <Image boxSize="24px" src="/arrow.svg" />
+              <Image boxSize="24px" src={IMAGE_PREFIX + '/arrow.svg'} />
             </Flex>
           </Flex>
         </VStack>
@@ -66,7 +67,7 @@ export default function HomePage() {
                 p="24px"
               >
                 <Flex px="8px">
-                  <Image boxSize="32px" src="/idea.svg" />
+                  <Image boxSize="32px" src={IMAGE_PREFIX + '/idea.svg'} />
                 </Flex>
                 <VStack flex="1 0 0" gap="10px">
                   <Text color="$title" typography="h6">
@@ -85,7 +86,7 @@ export default function HomePage() {
                 p="30px 24px"
               >
                 <Flex px="8px">
-                  <Image boxSize="32px" src="/trophy.svg" />
+                  <Image boxSize="32px" src={IMAGE_PREFIX + '/trophy.svg'} />
                 </Flex>
                 <VStack flex="1 0 0" gap="10px">
                   <Text color="$title" typography="h6">
@@ -107,7 +108,7 @@ export default function HomePage() {
                 p="30px 24px"
               >
                 <Flex px="8px">
-                  <Image boxSize="32px" src="/heart.svg" />
+                  <Image boxSize="32px" src={IMAGE_PREFIX + '/heart.svg'} />
                 </Flex>
                 <VStack flex="1 0 0" gap="10px">
                   <Text color="$title" typography="h6">
@@ -127,7 +128,7 @@ export default function HomePage() {
                 p="30px 24px"
               >
                 <Flex px="8px">
-                  <Image boxSize="32px" src="/notice.svg" />
+                  <Image boxSize="32px" src={IMAGE_PREFIX + '/notice.svg'} />
                 </Flex>
                 <VStack flex="1 0 0" gap="10px">
                   <Text color="$title" typography="h6">

apps/landing/src/components/Discord.tsx

@@ -1,5 +1,7 @@
 import { Center, Flex, Image, Text, VStack } from '@devup-ui/react'
 
+import { IMAGE_PREFIX } from '../constants'
+
 export function Discord() {
   return (
     <Center
@@ -29,7 +31,7 @@ export function Discord() {
             <Text color="#FFF" typography="buttonLbold">
               Join our Discord
             </Text>
-            <Image boxSize="24px" src="/outlink.svg" />
+            <Image boxSize="24px" src={IMAGE_PREFIX + '/outlink.svg'} />
           </Flex>
         </Flex>
       </VStack>

apps/landing/src/components/Footer.tsx

@@ -1,5 +1,7 @@
 import { Flex, Image, Text, VStack } from '@devup-ui/react'
 
+import { IMAGE_PREFIX } from '../constants'
+
 export function Footer() {
   return (
     <VStack bg="$footerBg" gap="80px" p="60px 320px">
@@ -57,7 +59,7 @@ export function Footer() {
       </Flex>
       <Flex alignItems="flex-end" justifyContent="space-between">
         <Flex alignItems="flex-end">
-          <Image alt="white-logo" src="/white-logo.svg" />
+          <Image alt="white-logo" src={IMAGE_PREFIX + '/white-logo.svg'} />
         </Flex>
         <VStack alignItems="flex-end" gap="10px">
           <Text color="$footerText" textAlign="right" typography="small">

apps/landing/src/components/Header/index.tsx

@@ -1,5 +1,6 @@
 import { Box, Flex, Image, Text } from '@devup-ui/react'
 
+import { IMAGE_PREFIX } from '../../constants'
 import { Container } from '../Container'
 
 export function Header() {
@@ -16,7 +17,7 @@ export function Header() {
           px="40px"
         >
           <Flex alignItems="center" gap="16px">
-            <Image h="42px" src="/logo.svg" />
+            <Image h="42px" src={IMAGE_PREFIX + '/logo.svg'} />
           </Flex>
           <Flex alignItems="center" gap="10px">
             <Flex alignItems="center" px="24px">
@@ -31,13 +32,13 @@ export function Header() {
             </Flex>
             <Flex alignItems="center">
               <Flex alignItems="center" px="10px">
-                <Image boxSize="24px" src="/github.svg" />
+                <Image boxSize="24px" src={IMAGE_PREFIX + '/github.svg'} />
               </Flex>
               <Flex alignItems="center" px="10px">
-                <Image boxSize="24px" src="/discord.svg" />
+                <Image boxSize="24px" src={IMAGE_PREFIX + '/discord.svg'} />
               </Flex>
               <Flex alignItems="center" px="10px">
-                <Image boxSize="24px" src="/light.svg" />
+                <Image boxSize="24px" src={IMAGE_PREFIX + '/light.svg'} />
               </Flex>
             </Flex>
           </Flex>

apps/landing/src/constants.ts

@@ -0,0 +1,2 @@
+export const IMAGE_PREFIX =
+  process.env.NODE_ENV === 'production' ? '/devup-ui' : ''