neo_components 0.1.0

data/app/javascript/neo_components/controllers/tab_change_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["tabContent", "tabLink"];
+
+  changeTab(event) {
+    event.preventDefault();
+    const selectedTab = event.currentTarget.dataset.tab;
+
+    this.tabContentTargets.forEach((el) => {
+      el.classList.toggle("hidden", el.dataset.tab !== selectedTab);
+    });
+
+    this.setActiveTab(selectedTab);
+  }
+
+  setActiveTab(activeTab) {
+    this.tabLinkTargets.forEach((link) => {
+      const isActive = link.dataset.tab === activeTab;
+      link.classList.toggle("active-border", isActive);
+    });
+  }
+}

data/app/javascript/neo_components/controllers/tabs_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["tabItem", "panelItem"]
+  static classes = ["active"]
+  static values = { panelHtml: String }
+
+  connect() {
+    this.tabItemTarget.classList.add(...this.activeClasses)
+  }
+  select(event) {
+    const currentTabIndex = this.tabItemTargets.indexOf(event.currentTarget)
+    
+    this.tabItemTargets.forEach((item, idx) => {
+      if (currentTabIndex === idx) {
+        item.classList.add(...this.activeClasses)
+      } else {
+        item.classList.remove(...this.activeClasses)
+      }
+    });
+    this.panelItemTargets.forEach((panel, idx) => {
+      if (currentTabIndex === idx) {
+        panel.classList.remove('hidden')
+      } else {
+        panel.classList.add('hidden')
+      }
+    })
+  }
+}

data/app/javascript/neo_components/controllers/text_clamp_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["longText", "showMoretoggle"]
+  static values = {
+    css: String
+  }
+
+  connect() {
+    this.showMoretoggleTargets.forEach((showMoretoggle, idx) => {
+      if (!this.isOverflowing(idx)) {
+        showMoretoggle.classList.add("hidden")
+      }
+    })
+  }
+
+  showMoretoggle(event) {
+    const clickedIndex = this.showMoretoggleTargets.indexOf(event.currentTarget)
+    const longTextTarget = this.longTextTargets[clickedIndex]
+    longTextTarget.classList.toggle(this.cssValue)
+    const isClamped = longTextTarget.classList.contains(this.cssValue)
+    event.currentTarget.textContent = isClamped ? "Show more" : "Show less"
+  }
+
+  isOverflowing(idx) {
+    const longTextTarget = this.longTextTargets[idx]
+    return longTextTarget.scrollHeight > longTextTarget.clientHeight
+  }
+}

data/app/views/shared/components/_progress_bar_short.html.erb

@@ -0,0 +1,8 @@
+<% if local_assigns[:progress].present? %>
+  <div class="flex flex-col items-center gap-1">
+    <span class="text-xs font-bold text-primary"><%= progress %>%</span>
+    <div class="h-1 grow bg-line-colour-light w-full">
+      <div class="h-1 bg-primary" style="width: <%= progress %>%"></div>
+    </div>
+  </div>
+<% end %>

data/app/views/shared/components/_tooltip.html.erb

@@ -0,0 +1,7 @@
+<% tooltip_position ||= "bottom" %>
+<div class="relative group inline-block">
+  <%= yield %>
+  <span class="tooltip tooltip-<%= tooltip_position %>">
+    <%= tooltip_text %>
+  </span>
+</div>

data/app/views/view_components/accordion_component/_accordion.html.erb

@@ -0,0 +1,22 @@
+<div class="border-b border-line-colour last:border-0"
+     data-controller="collapsible"
+     data-collapsible-open-value="<%= open %>">
+  <div class="">
+    <div data-action="click->collapsible#toggle"
+            class="flex gap-2 items-center  py-4 px-5  <%= icon_position_style %> w-full group cursor-pointer hover:bg-primary-light-50  <%= wrapper_class %>">
+      <%= header %>
+
+      <div data-collapsible-target="icon" class="text-primary transition-transform duration-300 ease-in-out transform">
+        <%= icon 'chevron-down', css: 'w-5 h-5' %>
+      </div>
+    </div>
+
+    <div data-collapsible-target="content" class="hidden">
+      <% if content %>
+        <%= content %>
+      <% else %>
+        <p>No content available</p>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/view_components/breadcrumbs_component/_breadcrumbs.html.erb

@@ -0,0 +1,38 @@
+<div class="breadcrumbs-wrapper main-text-sm-normal hidden md:block">
+  <div class="breadcrumbs-list-container">
+    <% breadcrumbs.intermediate_links.each do |title, link| %>
+      <div class="relative group inline-block">
+        <div class="breadcrumbs-list">
+          <span class="breadcrumbs-list-content">
+            <% if link.present? %>
+              <%= link_to title, link, class: 'breadcrumbs-intermediate-link' %>
+            <% else %>
+              <span class="breadcrumbs-intermediate-link"><%= title %></span>
+            <% end %>
+            <%= icon("chevron-right", css: 'breadcrumbs-divider-arrow') %>
+          </span>
+        </div>
+        <span class="absolute breadcrumbs-tooltip">
+          <%= title %>
+        </span>
+      </div>
+    <% end %>
+
+    <% if (title, link = breadcrumbs.last_link) %>
+      <div class="relative group inline-block">
+        <div class="breadcrumbs-list">
+          <span class="breadcrumbs-list-content">
+            <% if link.present? %>
+              <%= link_to title, link, class: 'breadcrumbs-last-link' %>
+            <% else %>
+              <span class="breadcrumbs-last-link"><%= title %></span>
+            <% end %>
+          </span>
+        </div>
+        <span class="absolute breadcrumbs-tooltip">
+          <%= title %>
+        </span>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/view_components/button_component/_button.html.erb

@@ -0,0 +1,13 @@
+<% button_content = capture do %>
+  <%= tag.div(**button.html_options,
+              class: [
+                button.base_styles,
+                button.color_styles,
+                button.sizing_styles].join(' ')) do %>
+    <% content = button.text.present? ? content_tag(:div, button.text, class: button.text_styles) : nil %>
+    <% icon = icon(button.icon_name, css: button.icon_styles) if button.icon_name.present? %>
+    <%= arrange_tags(icon, content, button.icon_position) %>
+  <% end %>
+<% end %>
+
+<%= button.tooltip_text.present? ? render('shared/components/tooltip', tooltip_position: button.tooltip_position, tooltip_text: button.tooltip_text) { button_content } : button_content %>

data/app/views/view_components/buttons/_danger.html.erb

@@ -0,0 +1,30 @@
+<% button_content = capture do %>
+  <% disabled_class = disabled ? 'pointer-events-none opacity-50 cursor-not-allowed' : '' %>
+  <% if size == "xl" %>
+    <%= tag.div(**html_options, class: "inline-flex h-14 items-center justify-center gap-2 rounded-lg border bg-white px-6 py-3 border-danger text-danger hover:border-primary hover:text-primary #{disabled_class}") do %>
+      <% content = content_tag(:div, label, class: "text-xl font-semibold font-['Poppins'] leading-7") if label.present? %>
+      <% icon = icon(icon_name || "adjustments-vertical", css: "h-5 w-5") if icon_name.present? %>
+      <%= arrange_tags(icon, content, icon_position) %>
+    <% end %>
+  <% elsif size == "lg" %>
+    <%= tag.div(**html_options, class: "inline-flex h-10 items-center justify-center gap-2 rounded-md border bg-white px-4 py-2 border-danger text-danger hover:border-primary hover:text-primary #{disabled_class}") do %>
+      <% content = content_tag(:div, label, class: "text-base font-medium font-['Poppins'] leading-normal") if label.present? %>
+      <% icon = icon(icon_name || "adjustments-vertical", css: "h-4 w-4") if icon_name.present? %>
+      <%= arrange_tags(icon, content, icon_position) %>
+    <% end %>
+  <% elsif size == "md" %>
+    <%= tag.div(**html_options, class: "inline-flex h-9 items-center justify-center gap-2 rounded-md border bg-white px-4 py-2 border-danger text-danger hover:border-primary hover:text-primary #{disabled_class}") do %>
+      <% content = content_tag(:div, label, class: "text-sm font-medium font-['Poppins'] leading-tight") if label.present? %>
+      <% icon = icon(icon_name || "adjustments-vertical", css: "h-[14px] w-[14px]") if icon_name.present? %>
+      <%= arrange_tags(icon, content, icon_position) %>
+    <% end %>
+  <% elsif size == "sm" %>
+    <%= tag.div(**html_options, class: "inline-flex h-6 items-center justify-center gap-2 rounded-sm border bg-white px-3 py-1 border-danger text-danger hover:border-primary hover:text-primary #{disabled_class}") do %>
+      <% content = content_tag(:div, label, class: "text-xs font-normal font-['Poppins'] leading-none") if label.present? %>
+      <% icon = icon(icon_name || "adjustments-vertical", css: "h-3 w-3") if icon_name.present? %>
+      <%= arrange_tags(icon, content, icon_position) %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= local_assigns[:tooltip_text].present? ? render('shared/components/tooltip', tooltip_position: tooltip_position, tooltip_text: tooltip_text) { button_content } : button_content %>

data/app/views/view_components/buttons/_primary.html.erb

@@ -0,0 +1,31 @@
+<% button_content = capture do %>
+  <% disabled_class = disabled ? 'opacity-50 cursor-not-allowed' : '' %>
+
+  <% if size == "xl" %>
+    <%= tag.div(**html_options, class: "inline-flex h-14 items-center justify-center gap-2 rounded-lg px-6 py-3 text-white bg-primary hover:bg-primary-light  #{disabled_class}") do %>
+      <% content = content_tag(:div, label, class: "text-white text-xl font-semibold font-['Poppins'] leading-7") if label.present? %>
+      <% icon = icon(icon_name || "adjustments-vertical", css: "h-5 w-5") if icon_name.present? %>
+      <%= arrange_tags(icon, content, icon_position) %>
+    <% end %>
+  <% elsif size == "lg" %>
+    <%= tag.div(**html_options, class: "inline-flex h-10 items-center justify-center gap-2 rounded-md px-4 py-2 text-white bg-primary hover:bg-primary-light #{disabled_class}") do %>
+      <% content = content_tag(:div, label, class: "text-white text-base font-medium font-['Poppins'] leading-normal") if label.present? %>
+      <% icon = icon(icon_name || "adjustments-vertical", css: "h-4 w-4") if icon_name.present? %>
+      <%= arrange_tags(icon, content, icon_position) %>
+    <% end %>
+  <% elsif size == "md" %>
+    <%= tag.div(**html_options, class: "inline-flex h-9 items-center justify-center gap-2 rounded-md px-4 py-2 text-white bg-primary hover:bg-primary-light  #{disabled_class}") do %>
+      <% content = content_tag(:div, label, class: "text-white text-sm font-medium font-['Poppins'] leading-tight") if label.present? %>
+      <% icon = icon(icon_name || "adjustments-vertical", css: "h-[14px] w-[14px]") if icon_name.present? %>
+      <%= arrange_tags(icon, content, icon_position) %>
+    <% end %>
+  <% elsif size == "sm" %>
+    <%= tag.div(**html_options, class: "inline-flex h-6 items-center justify-center gap-2 rounded-sm px-3 py-1 text-white bg-primary hover:bg-primary-light  #{disabled_class}") do %>
+      <% content = content_tag(:div, label, class: "text-white text-xs font-normal font-['Poppins'] leading-none") if label.present? %>
+      <% icon = icon(icon_name || "adjustments-vertical", css: "h-3 w-3") if icon_name.present? %>
+      <%= arrange_tags(icon, content, icon_position) %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= tooltip_text.present? ? render('shared/components/tooltip', tooltip_position:, tooltip_text:) { button_content } : button_content %>

data/app/views/view_components/buttons/_secondary.html.erb

@@ -0,0 +1,29 @@
+<% button_content = capture do %>
+  <% disabled_class = disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-primary hover:text-primary' %>
+  <% if size == "xl" %>
+    <%= tag.div(**html_options, class: "inline-flex h-14 items-center justify-center gap-2 rounded-lg border bg-white px-6 py-3 border-slate-grey-50 text-letter-color-light  #{disabled_class}") do %>
+      <% content = content_tag(:div, label, class: "text-xl font-semibold font-['Poppins'] leading-7 cursor-inherit") if label.present? %>
+      <% icon = icon(icon_name || "adjustments-vertical", css: "h-5 w-5 cursor-inherit") if icon_name.present? %>
+      <%= arrange_tags(icon, content, icon_position) %>
+    <% end %>
+  <% elsif size == "lg" %>
+    <%= tag.div(**html_options, class: "inline-flex h-10 items-center justify-center gap-2 rounded-md border bg-white px-4 py-2 border-slate-grey-50 text-letter-color-light   #{disabled_class}") do %>
+      <% content = content_tag(:div, label, class: "text-base font-medium font-['Poppins'] leading-normal cursor-inherit") if label.present? %>
+      <% icon = icon(icon_name || "adjustments-vertical", css: "h-4 w-4 cursor-inherit") if icon_name.present? %>
+      <%= arrange_tags(icon, content, icon_position) %>
+    <% end %>
+  <% elsif size == "md" %>
+    <%= tag.div(**html_options, class: "inline-flex h-9 items-center justify-center gap-2 rounded-md border bg-white px-4 py-2 border-slate-grey-50 text-letter-color-light  #{disabled_class}") do %>
+      <% content = content_tag(:div, label, class: "text-sm font-medium font-['Poppins'] leading-tight cursor-inherit") if label.present? %>
+      <% icon = icon(icon_name || "adjustments-vertical", css: "h-[14px] w-[14px] cursor-inherit") if icon_name.present? %>
+      <%= arrange_tags(icon, content, icon_position) %>
+    <% end %>
+  <% elsif size == "sm" %>
+    <%= tag.div(**html_options, class: "inline-flex h-6 items-center justify-center gap-2 rounded-sm border bg-white px-3 py-1 border-slate-grey-50 text-letter-color-light  #{disabled_class}") do %>
+      <% content = content_tag(:div, label, class: "text-xs font-normal font-['Poppins'] leading-none cursor-inherit") if label.present? %>
+      <% icon = icon(icon_name || "adjustments-vertical", css: "h-3 w-3 cursor-inherit") if icon_name.present? %>
+      <%= arrange_tags(icon, content, icon_position) %>
+    <% end %>
+  <% end %>
+<% end %>
+<%= local_assigns[:tooltip_text].present? ? render('shared/components/tooltip', tooltip_position: , tooltip_text: ) { button_content } : button_content %>

data/app/views/view_components/chip_component/_chip_component.html.erb

@@ -0,0 +1,9 @@
+<div class="flex w-fit gap-1 items-center rounded h-5 px-1 py-0.5 border <%= border_style %> <%= bg_style %>">
+  <% if icon_name.present? %>
+    <%= icon(icon_name, span_css: icon_style, css: 'h-4 w-4') %>
+  <% end %>
+  <span class="whitespace-nowrap general-text-sm-normal text-center justify-start <%= text_style %>"><%= text %></span>
+  <% if close %>
+    <%= icon("x-circle", span_css: close_style, css: 'h-4 w-4') %>
+  <% end %>
+</div>

data/app/views/view_components/course_carousal/_course_card_component.html.erb

@@ -0,0 +1,65 @@
+<div class="inline-block rounded box-shadow-medium border border-line-colour-light relative max-h-[298px]">
+  <div class="w-full rounded md:max-w-[310px] relative">
+    <div class="absolute top-0 right-0 z-10 flex flex-wrap justify-start gap-2 heading">
+      <% course.tags.each do |tag| %>
+        <% if tag.tag_type == "level" %>
+          <span class="px-2 py-1 text-xs font-medium bg-secondary text-white">
+            <%= tag.name %>
+          </span>
+        <% end %>
+      <% end %>
+    </div>
+    <%= image_tag course_banner(course, :horizontal), class: 'w-screen h-[120px] rounded-t object-cover' %>
+    <div class="flex flex-col justify-between">
+      <div class="p-4">
+        <p class="mb-2 overflow-hidden text-ellipsis heading heading-semibold text-primary h-12 line-clamp-2">
+          <%= course.title %>
+        </p>
+        <div class="flex justify-between mt-2">
+          <div class="flex items-center">
+            <span class="icon icon-lessons h-3.5 w-3.5 bg-primary"></span>
+            <span class="ml-2 text-xs font-medium"><%= pluralize(modules_count(course), 'module') %></span>
+          </div>
+          <div class="flex items-center">
+            <span class="icon icon-clock h-3.5 w-3.5 bg-primary"></span>
+            <span class="ml-2 text-xs font-medium"><%= course_duration(course) %></span>
+          </div>
+          <div class="flex items-center">
+            <span class="icon icon-user h-3.5 w-3.5 bg-primary"></span>
+            <span class="ml-2 text-xs font-medium"><%= enroll_count(course) %></span>
+          </div>
+          <% if course.rating.present? %>
+            <div class="flex items-center">
+              <%= icon("star-transparent", css: "h-4 w-4 text-primary fill-primary") %>
+              <span class="ml-2 text-xs font-medium"><%= course.rating.ceil %></span>
+            </div>
+          <% end %>
+        </div>
+        <div class="flex flex-col gap-3 mt-3">
+          <div class="flex flex-wrap gap-2 h-[24px] heading">
+            <% course.tags.each do |tag| %>
+              <% if tag.tag_type == "category" %>
+                <span class="px-2 py-1 text-xs font-medium bg-primary-light-50 rounded">
+                  <%= tag.name %>
+                </span>
+              <% end %>
+            <% end %>
+          </div>
+          <% if local_assigns[:enrollment].present? %>
+            <div class=" flex flex-row items-center justify-between gap-2">
+              <div class="w-[83px]">
+                <%= render 'shared/components/progress_bar_short', progress: enrollment.progress %>
+              </div>
+              <% if enrollment.deadline_present? %>
+                <div class="text-xs flex flex-row items-center gap-2">
+                  <span class="h-3.5 w-3.5 icon icon-calendar bg-letter-color"></span>
+                  <%= pluralize(days_remaining(enrollment.deadline_at), "day") %> left
+                </div>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/view_components/course_carousal/_course_carousal_body_component.html.erb

@@ -0,0 +1,25 @@
+<div class="relative flex w-full" id="<%= dom_key("course-carousal") %>">  
+  <div class="absolute -left-3 z-50 flex h-full items-center hover:text-primary hover:cursor-pointer"
+      data-course-carousal-target="prevArrow"
+      data-action="click->course-carousal#shiftWindowLeft">
+    <%= icon("chevron-left", css: "icon-medium") %>
+  </div>
+
+  <div class="mx-5 flex flex-row flex-nowrap justify-between overflow-y-auto scroll-smooth"
+      data-course-carousal-target="courseCarousalBody">
+    <% courses.each do |course| %>
+      <%= link_to course_path(course) do %>
+        <div class="mx-1 transform transition-transform duration-500 scale-100"
+            data-course-carousal-target="cardComponent">
+          <%= course_card_component(course: course) %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+
+  <div class="absolute -right-3 z-50 flex h-full items-center hover:text-primary hover:cursor-pointer"
+      data-course-carousal-target="nextArrow"
+      data-action="click->course-carousal#shiftWindowRight">
+    <%= icon("chevron-right", css: "icon-medium") %>
+  </div>
+</div>

data/app/views/view_components/course_carousal/_course_carousal_component.html.erb

@@ -0,0 +1,8 @@
+<div class="w-full" data-controller="course-carousal">
+  <div class="my-4">
+    <span class="font-['Poppins'] text-xl font-semibold"><%= title %></span>&nbsp<span class="text-letter-color-light">(<%= pluralize(count, 'course') %>)</span>
+    <%= link_to 'View more', load_path, class: 'text-xs text-primary hover:cursor-pointer underline', data: { course_carousal_component_target: 'loadPath' } %>
+  </div>
+
+  <%= course_carousal_body_component(courses:) %>
+</div>

data/app/views/view_components/course_carousal/_long_course_card_component.html.erb

@@ -0,0 +1,70 @@
+<div class="rounded-xl border border-line-colour-light relative max-h-[104px] md:max-h-[132px]">
+  <div class="w-full rounded relative flex gap-1">
+    <div class="absolute top-0 left-0 z-10 flex flex-wrap justify-start gap-2 heading">
+      <% course.tags.each do |tag| %>
+        <% if tag.tag_type == "level" %>
+          <span class="px-2 py-1 text-xs font-medium bg-secondary text-primary-dark rounded-tl-xl rounded-br-xl">
+            <%= tag.name %>
+          </span>
+        <% end %>
+      <% end %>
+    </div>
+    
+    <div class="relative">
+      <%= image_tag course_banner(course, :horizontal), class: 'w-[100px] md:w-[297px] h-[104px] md:h-[132px] rounded-l-xl object-cover' %>
+      <span class="absolute bottom-0 right-4 z-10 flex rounded-t-md bg-primary-light-100 general-text-sm-normal py-0.5 px-1 text-primary-dark">
+          <%= course_duration(course) %>
+      </span>
+    </div>
+    
+    <div class="flex justify-between flex-grow p-4 md:p-5 gap-3 ">
+      <div class="flex flex-col gap-3">
+        <div class="flex justify-between">
+          <div class="max-w-[148px] md:max-w-[716px]">
+            <p class="main-text-md-medium text-primary overflow-hidden md:whitespace-nowrap md:text-ellipsis line-clamp-2">
+              <%= course.title %>
+            </p>
+          </div>
+        </div>
+        
+        <div class="flex gap-3 md:gap-4">
+          <% if course.rating.present? %>
+            <div class="flex items-center">
+              <%= icon("star-transparent", css: "h-4 w-4 text-primary fill-primary") %>
+              <span class="ml-2 general-text-sm-normal"><%= course.rating %></span>
+            </div>
+            <div class="w-px h-full bg-slate-grey-light md:hidden"></div>
+
+          <% end %>
+          <div class="flex gap-3 md:gap-1">
+            <div class="flex items-center">
+              <%= icon("book", css: "h-4 w-4 text-primary") %>
+              <span class="ml-2 general-text-sm-normal"><%= modules_count(course) %></span>
+            </div>
+            <div class="w-px h-full bg-slate-grey-light"></div>
+            <div class="flex items-center">
+              <%= icon("user", css: "h-4 w-4 text-primary") %>
+              <span class="ml-2 general-text-sm-normal"><%= enroll_count(course) %></span>
+            </div>
+          </div>
+        </div>
+        
+        <div class="flex flex-wrap gap-2 h-[24px] hidden md:block">
+          <% course.tags.each do |tag| %>
+            <% if tag.tag_type == "category" %>
+              <%= chip_component(text: tag.name , colorscheme: 'primary', icon_name: 'check') %>
+            <% end %>
+          <% end %>
+        </div>
+       
+     </div>
+     <% unless program.present? %>
+        <%# TODO: Bookmark is temporarily hidden. Enable once the feature is finalized. %>
+        <div class="border border-primary rounded-full min-w-8 md:min-w-10 h-8 md:h-10 flex justify-center hidden">
+          <%= icon("bookmark", css: "h-5 w-5 text-primary") %>
+        </div>
+      <% end %>  
+    </div>
+   
+  </div>
+</div>

data/app/views/view_components/course_select/_course_select_component.html.erb

@@ -0,0 +1,19 @@
+<div id="course-select-component" data-controller="course-select" data-show-duration="<%= show_duration %>">
+  <%= _course_select_search_component(search_context:, tags:) %>
+  <%= form_with url: submit_path, method: :post do |form| %>
+    <% if search_context.team_assign? %>
+      <%= form.hidden_field :team_id, value: search_context.team.id %>
+    <% elsif search_context.user_assign? %>
+      <%= form.hidden_field :user_id, value: search_context.user.id %>
+    <% end %>
+
+    <div id="course-select-list">
+      <%= _course_select_list_component(search_context:, courses:) %>
+    </div>
+
+    <div id="footer" class="sticky right-8 bottom-0 -mb-8 flex w-full flex-col items-center justify-end gap-4 bg-white py-6 text-sm md:flex-row">
+      <%= form.button 'Assign Course', class: 'bg-primary text-white px-4 py-2 rounded w-full md:w-auto md:order-2' %>
+      <%= link_to 'Cancel', cancel_link, class: 'w-full md:w-auto text-center md:text-left md:order-1' %>
+    </div>
+<% end %>
+</div>

data/app/views/view_components/course_select/_list_component.html.erb

@@ -0,0 +1,14 @@
+<div>
+  <% if courses.empty? %>
+    <div class="text-notice">No courses to select</div>
+  <% else %>
+
+    <ul id="course-list" class="flex flex-col gap-4 overflow-y-auto p-1 h-[700px]">
+      <% courses.each do |course| %>
+        <%= _course_select_list_item_component(course: course) %>
+      <% end %>
+    </ul>
+
+    <%= _course_select_load_more(search_context: search_context, courses: courses) %>
+  <% end %>
+</div>

data/app/views/view_components/course_select/_list_item_component.html.erb

@@ -0,0 +1,86 @@
+<li id="<%= dom_id(course, "unassigned") %>" class="w-full" data-controller="course-select-item" data-course-select-item-course-select-outlet='#course-select-component'>
+  <div class="relative flex w-full flex-col rounded p-6 box-shadow-medium md:flex-row">
+    <div class="absolute top-1 left-1 z-10 flex flex-wrap justify-start gap-2 heading">
+      <% course.tags.each do |tag| %>
+        <% if tag.tag_type == "level" %>
+          <span class="px-2 py-1 text-xs font-medium text-white bg-secondary">
+            <%= tag.name %>
+          </span>
+        <% end %>
+      <% end %>
+    </div>
+
+    <%= image_tag course_banner(course, :vertical), class: 'h-[118px] w-[152px] md:h-[208px] md:w-[140px] rounded-l object-cover' %>
+
+    <div class="flex w-full flex-col gap-4 pt-2 md:ps-4">
+      <div class="relative">
+        <%= check_box_tag 'course_ids[]', # name
+                          course.id, # value
+                          false, # checked?
+                          id: dom_id(course, "course_ids"),
+                          class: 'absolute -top-32 md:top-0 right-0 w-6 h-6 border-2 rounded border-slate-grey-50 checked:bg-slate-grey-50 checked:border-slate-grey-50 checked:focus:bg-slate-grey-50 focus:ring-0',
+                          data: { action: 'course-select-item#toggleDurationSelect' } %>
+
+        <div class="flex flex-col gap-4">
+          <p class="overflow-hidden text-ellipsis text-primary heading heading-semibold">
+            <%= course.title %>
+          </p>
+          <div class="flex justify-start space-x-1 md:space-x-4">
+            <div class="flex items-center">
+              <span class="icon icon-lessons h-3.5 w-3.5 bg-primary"></span>
+              <span class="ml-2 text-xs font-medium"><%= pluralize(modules_count(course), 'module') %></span>
+            </div>
+            <div class="flex items-center">
+              <span class="icon icon-clock h-3.5 w-3.5 bg-primary"></span>
+              <span class="ml-2 text-xs font-medium"><%= course_duration(course) %></span>
+            </div>
+            <div class="flex items-center">
+              <span class="icon icon-user h-3.5 w-3.5 bg-primary"></span>
+              <span class="ml-2 text-xs font-medium"><%= enroll_count(course) %></span>
+            </div>
+          </div>
+          <p class="overflow-hidden text-ellipsis text-sm font-medium tracking-tight max-h-[20px] heading">Course
+            Description</p>
+          <div class="rounded-lg p-4 text-justify text-sm tracking-tight bg-primary-light-50">
+            <div class="flex h-full items-center overflow-hidden text-sm">
+              <%= course_description(course) %>
+            </div>
+          </div>
+          <div>
+            <div class="flex h-full items-center overflow-hidden text-sm">
+              <% course.tags.each do |tag| %>
+                <% if tag.tag_type == "category" %>
+              <span class="rounded px-2 py-1 text-xs font-medium bg-primary-light-50">
+                <%= tag.name %>
+              </span>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+
+        <div class="invisible absolute -top-24 -right-4 flex flex-col items-end gap-2 opacity-0 md:top-0 md:right-12 md:flex-row md:items-center" data-course-select-item-target="durationContainer">
+          <label for="duration" class="text-sm font-medium heading md:text-base">Assign Duration:</label>
+          <div class="flex flex-row items-center">
+            <%= date_field_tag :date, nil,
+                               id: "datePicker",
+                               class: "invisible p-0 w-[2px]",
+                               data: {
+                                 action: "change->course-select-item#datePicked",
+                                 course_select_item_target: "datePicker"
+                               } %>
+
+            <%= select_tag 'duration[]', options_for_select(options_for_duration),
+                           id: 'duration',
+                           disabled: true,
+                           class: 'border border-line-colour-light box-shadow-small rounded focus:ring-0 p-0 px-2 h-6 w-28 text-sm',
+                           data: { course_select_item_target: 'dateSelector', duration: 'duration' } %>
+            <div class="relative flex items-center pl-2">
+              <span class="cursor-pointer icon-small icon icon-calendar bg-letter-color" data-action="click->course-select-item#openDatePicker"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</li>

data/app/views/view_components/course_select/_load_more.html.erb

@@ -0,0 +1,17 @@
+<div class="mt-4" id="load-more">
+  <% if courses.next_page.nil? %>
+    <%= button(label: 'Load more', type: 'secondary', disabled: true) %>
+  <% elsif search_context.team_assign? %>
+    <%= link_to load_more_searches_path(context: search_context.context, team_id: search_context.team.id, page: courses.next_page), data: { turbo_stream: true } do %>
+      <%= button(label: 'Load more', type: 'secondary') %>
+    <% end %>
+  <% elsif search_context.user_assign? %>
+    <%= link_to load_more_searches_path(context: search_context.context, user_id: search_context.user.id, page: courses.next_page), data: { turbo_stream: true } do %>
+      <%= button(label: 'Load more', type: 'secondary') %>
+    <% end %>
+  <% elsif search_context.program? %>
+    <%= link_to load_more_searches_path(context: search_context.context, program_id: search_context.program.id, page: courses.next_page), data: { turbo_stream: true } do %>
+      <%= button(label: 'Load more', type: 'secondary') %>
+    <% end %>
+  <% end %>
+</div>