feat: Landscape mode Improvement

Dashboard/Dashboard/Presentation/Elements/PrimaryCardView.swift

@@ -31,6 +31,7 @@ public struct PrimaryCardView: View {
     private var resumeAction: () -> Void
     private var upgradeAction: () -> Void
     private var isUpgradeable: Bool
+    @Environment(\.isHorizontal) var isHorizontal
 
     public init(
         courseName: String,
@@ -76,22 +77,65 @@ public struct PrimaryCardView: View {
 
     public var body: some View {
         ZStack {
+            if isHorizontal {
+                horizontalLayout
+            } else {
+                verticalLayout
+            }
+        }
+        .background(Theme.Colors.courseCardBackground)
+        .cornerRadius(8)
+        .shadow(color: Theme.Colors.courseCardShadow, radius: 4, x: 0, y: 3)
+        .padding(20)
+    }
+
+    @ViewBuilder
+    var verticalLayout: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            Group {
+                courseBanner
+                    .frame(height: 140)
+                    .clipped()
+                ProgressLineView(progressEarned: progressEarned, progressPossible: progressPossible)
+                courseTitle
+            }
+            .onTapGesture {
+                openCourseAction()
+            }
+            assignments
+        }
+    }
+
+    @ViewBuilder
+    var horizontalLayout: some View {
+        HStack(alignment: .top, spacing: 0) {
             VStack(alignment: .leading, spacing: 0) {
-                Group {
+                GeometryReader { proxy in
                     courseBanner
-                    ProgressLineView(progressEarned: progressEarned, progressPossible: progressPossible)
+                        .frame(width: proxy.size.width)
+                        .clipped()
+                }
+                ProgressLineView(progressEarned: progressEarned, progressPossible: progressPossible)
+            }
+            .onTapGesture {
+                openCourseAction()
+            }
+            VStack(alignment: .leading, spacing: 0) {
+                ZStack(alignment: .leading) {
                     courseTitle
                 }
+                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
+                .background(
+                    Theme.Colors.background // need for tap area
+                )
+
                 .onTapGesture {
                     openCourseAction()
                 }
                 assignments
             }
         }
-        .background(Theme.Colors.courseCardBackground)
-        .cornerRadius(8)
-        .shadow(color: Theme.Colors.courseCardShadow, radius: 4, x: 0, y: 3)
-        .padding(20)
+        .frame(minHeight: 240)
     }
 
     private var assignments: some View {
@@ -245,8 +289,6 @@ public struct PrimaryCardView: View {
             .onFailureImage(CoreAssets.noCourseImage.image)
             .resizable()
             .aspectRatio(contentMode: .fill)
-            .frame(height: 140)
-            .clipped()
             .accessibilityElement(children: .ignore)
             .accessibilityIdentifier("course_image")
     }