Polished links and filled in values for ship properties. Added methods to return ship status as string and convert ship status to an asset link.

src/Controller/MainController.php

@@ -9,7 +9,7 @@ use Symfony\Component\Routing\Attribute\Route;
 
 class MainController extends AbstractController
 {
-    #[Route('/', name: 'main')]
+    #[Route('/', name: 'app_homepage')]
     public function homepage(StarshipRepository $repository): Response
     {
         $starships = $repository->findAll();

src/Model/Starship.php

@@ -39,4 +39,18 @@ class Starship
     {
         return $this->status;
     }
+
+    public function getStatusAsString(): string
+    {
+        return $this->status->value;
+    }
+
+    public function getStatusImageFilename(): string
+    {
+        return match ($this->status) {
+            StarshipStatusEnum::WAITING => '/images/status-waiting.png',
+            StarshipStatusEnum::IN_PROGRESS => '/images/status-in-progress.png',
+            StarshipStatusEnum::COMPLETED => '/images/status-complete.png',
+        };
+    }
 }

templates/base.html.twig

@@ -15,11 +15,11 @@
         <div class="flex flex-col justify-between min-h-screen relative">
             <div>
                 <header class="h-[114px] shrink-0 flex flex-col sm:flex-row items-center sm:justify-between py-4 sm:py-0 px-6 border-b border-white/20 shadow-md">
-                    <a href="#">
+                    <a href="{{ path('app_homepage') }}">
                         <img class="h-[42px]" src="{{ asset('images/starshop-logo.png') }}" alt="starshop logo">
                     </a>
                     <nav class="flex space-x-4 font-semibold">
-                        <a class="hover:text-amber-400 pt-2" href="#">
+                        <a class="hover:text-amber-400 pt-2" href="{{ path('app_homepage') }}">
                             Home
                         </a>
                         <a class="hover:text-amber-400  pt-2" href="#">

templates/main/homepage.html.twig

@@ -16,11 +16,11 @@
                 {% for ship in ships %}
                     <div class="bg-[#16202A] rounded-2xl pl-5 py-5 pr-11 flex flex-col min-[1174px]:flex-row min-[1174px]:justify-between">
                         <div class="flex justify-center min-[1174px]:justify-start">
-                            <img class="h-[83px] w-[84px]" src="/images/status-in-progress.png" alt="Status: {{ ship.status.value }}">
+                            <img class="h-[83px] w-[84px]" src="{{ asset(ship.getStatusImageFilename) }}" alt="Status: {{ ship.getStatusAsString}}">
                             <div class="ml-5">
                                 <div class="rounded-2xl py-1 px-3 flex justify-center w-32 items-center bg-amber-400/10">
                                     <div class="rounded-full h-2 w-2 bg-amber-400 blur-[1px] mr-2"></div>
-                                    <p class="uppercase text-xs text-nowrap">{{ ship.status.value }}</p>
+                                    <p class="uppercase text-xs text-nowrap">{{ ship.getStatusAsString }}</p>
                                 </div>
                                 <h4 class="text-[22px] pt-1 font-semibold">
                                     <a

templates/starship/show.html.twig

@@ -4,7 +4,7 @@
 
 {% block body %}
 <div class="my-4 px-8">
-    <a class="bg-white hover:bg-gray-200 rounded-xl p-2 text-black" href="#">
+    <a class="bg-white hover:bg-gray-200 rounded-xl p-2 text-black" href="{{ path('app_homepage') }}">
         <svg class="inline text-black" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#000" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
         Back
     </a>
@@ -18,7 +18,7 @@
             <div class="px-8 pt-8">
                 <div class="rounded-2xl py-1 px-3 flex justify-center w-32 items-center bg-amber-400/10">
                     <div class="rounded-full h-2 w-2 bg-amber-400 blur-[1px] mr-2"></div>
-                    <p class="uppercase text-xs">{{ ship.status }}</p>
+                    <p class="uppercase text-xs">{{ ship.getStatusAsString }}</p>
                 </div>
 
                 <h1 class="text-[32px] font-semibold border-b border-white/10 pb-5 mb-5">
@@ -31,7 +31,7 @@
                 <p class="text-[22px] font-semibold">{{ ship.class }}</p>
 
                 <h4 class="text-xs text-slate-300 font-semibold mt-2 uppercase">Ship Status</h4>
-                <p class="text-[22px] font-semibold">30,000 lys to next service</p>
+                <p class="text-[22px] font-semibold">{{ ship.getStatusAsString }}</p>
             </div>
         </div>
     </div>