feat: add concept list and item components for track page

Implement the `ConceptList` and `ConceptListItem` components to 
display sorted concepts on the track page. Introduce a new SVG 
icon for visual representation. Update the card layout for 
better spacing and remove an unused SVG. These changes enhance 
the user interface and improve the organization of concept 
information.

Author: rohitpaulk

app/components/track-page/card.hbs

@@ -31,7 +31,7 @@
         {{#if @isComplete}}
           {{svg-jar "check-circle" class="w-8 h-8 fill-current text-teal-500"}}
         {{else if (and @logoImageUrl @logoImageAltText)}}
-          <img src={{@logoImageUrl}} alt={{@logoImageAltText}} class="w-8 md:w-12 transform scale-100 group-hover:scale-105 transition-all" />
+          <img src={{@logoImageUrl}} alt={{@logoImageAltText}} class="w-8 transform scale-100 group-hover:scale-105 transition-all" />
         {{/if}}
       </div>
     </div>

app/components/track-page/course-card.hbs

@@ -14,7 +14,7 @@
     </:afterTitle>
 
     <:default>
-      <div class="leading-6 prose dark:prose-invert mb-6">
+      <div class="leading-6 prose dark:prose-invert mb-4 pr-8">
         {{markdown-to-html this.introductionMarkdown}}
       </div>
 
@@ -53,7 +53,7 @@
         </div>
       {{/if}}
 
-      <div class="leading-6 prose dark:prose-invert mb-6 pr-8 md:pr-12">
+      <div class="leading-6 prose dark:prose-invert mb-4 pr-8">
         {{markdown-to-html this.introductionMarkdown}}
       </div>
 

app/components/track-page/primer-concept-group-card/concept-list-item.hbs

@@ -0,0 +1,33 @@
+<LinkTo
+  @route="concept"
+  @models={{array @concept.slug}}
+  class="block hover:bg-gray-50 dark:hover:bg-gray-700/50 py-1.5 -mx-1.5 px-1.5 rounded"
+  data-test-concept-list-item
+  ...attributes
+>
+  <div class="flex items-center justify-between">
+    <div class="flex items-center">
+      <div class="w-2 h-2 {{if @isComplete 'bg-teal-500' 'bg-gray-200 dark:bg-gray-700'}} rounded-full mr-2"></div>
+
+      {{! TODO: Qualify all heroicons with solid/outline }}
+      {{svg-jar "book-open-outline" class="w-6 mr-2 text-gray-400 dark:text-gray-600"}}
+
+      <div class="prose dark:prose-invert prose-sm">
+        {{@concept.title}}
+      </div>
+    </div>
+
+    {{#if @isComplete}}
+      {{svg-jar "check" class="ml-1 w-5 text-teal-500"}}
+    {{else}}
+      <div class="items-center gap-1 pl-4 hidden sm:flex flex-shrink-0">
+        {{svg-jar "clock" class="w-4 fill-current text-gray-300 dark:text-gray-700"}}
+
+        <span class="text-xs text-gray-400 dark:text-gray-600">
+          {{@concept.estimatedReadingTimeInMinutes}}
+          mins
+        </span>
+      </div>
+    {{/if}}
+  </div>
+</LinkTo>

app/components/track-page/primer-concept-group-card/concept-list-item.ts

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
+import type ConceptModel from 'codecrafters-frontend/models/concept';
+import { service } from '@ember/service';
+
+interface Signature {
+  Element: HTMLAnchorElement;
+
+  Args: {
+    isComplete: boolean;
+    concept: ConceptModel;
+  };
+}
+
+export default class ConceptListItemComponent extends Component<Signature> {
+  @service declare authenticator: AuthenticatorService;
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'TrackPage::PrimerConceptGroupCard::ConceptListItem': typeof ConceptListItemComponent;
+  }
+}

app/components/track-page/primer-concept-group-card/concept-list.hbs

@@ -0,0 +1,3 @@
+{{#each this.sortedConcepts as |concept|}}
+  <TrackPage::PrimerConceptGroupCard::ConceptListItem @concept={{concept}} @isComplete={{false}} />
+{{/each}}

app/components/track-page/primer-concept-group-card/concept-list.ts

@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+import ConceptGroupModel from 'codecrafters-frontend/models/concept-group';
+import ConceptModel from 'codecrafters-frontend/models/concept';
+import Store from '@ember-data/store';
+import { inject as service } from '@ember/service';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    conceptGroup: ConceptGroupModel;
+  };
+}
+
+export default class TrackPagePrimerConceptGroupCardConceptListComponent extends Component<Signature> {
+  @service declare store: Store;
+
+  get sortedConcepts() {
+    return this.args.conceptGroup.conceptSlugs.reduce((acc, slug) => {
+      const concept = this.store.peekAll('concept').find((concept) => concept.slug === slug);
+
+      if (concept) {
+        acc.push(concept);
+      }
+
+      return acc;
+    }, [] as ConceptModel[]);
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'TrackPage::PrimerConceptGroupCard::ConceptList': typeof TrackPagePrimerConceptGroupCardConceptListComponent;
+  }
+}

app/components/track-page/primer-concept-group-card/index.hbs

@@ -0,0 +1,22 @@
+<TrackPage::Card
+  @isComplete={{false}}
+  @logoImageAltText={{@language.name}}
+  @logoImageUrl={{@language.colorLogoUrl}}
+  @title="Rust Primer"
+  @recentParticipants={{array}}
+  ...attributes
+>
+  <:afterTitle>
+    <Pill @color="green">
+      FREE
+    </Pill>
+  </:afterTitle>
+
+  <:default>
+    <div class="leading-6 prose dark:prose-invert mb-4">
+      New to Rust? Start with our interactive concepts that cover the basics.
+    </div>
+
+    <TrackPage::PrimerConceptGroupCard::ConceptList @conceptGroup={{@conceptGroup}} />
+  </:default>
+</TrackPage::Card>

app/components/track-page/primer-concept-group-card/index.ts

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import ConceptGroupModel from 'codecrafters-frontend/models/concept-group';
+import LanguageModel from 'codecrafters-frontend/models/language';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    language: LanguageModel;
+    conceptGroup: ConceptGroupModel;
+  };
+}
+
+export default class TrackPagePrimerConceptGroupCardComponent extends Component<Signature> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'TrackPage::PrimerConceptGroupCard': typeof TrackPagePrimerConceptGroupCardComponent;
+  }
+}

app/templates/track.hbs

@@ -10,6 +10,23 @@
   <div class="container mx-auto lg:max-w-screen-lg px-3 md:px-6 py-6 md:py-10">
     <div class="flex items-start">
       <div class="flex-grow">
+        {{#if this.trackPrimerConceptGroup}}
+          <TrackPage::PrimerConceptGroupCard @language={{@model.language}} @conceptGroup={{this.trackPrimerConceptGroup}} class="w-full mb-6" />
+
+          <div class="border-b pb-1 mb-4 flex">
+            <div class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
+              {{@model.language.name}}
+              Projects
+            </div>
+          </div>
+
+          <div class="prose dark:prose-invert mb-4">
+            <p>
+              Ready to get your hands dirty? Here are some projects you can build.
+            </p>
+          </div>
+        {{/if}}
+
         <TrackPage::CourseCardList @language={{@model.language}} @courses={{this.sortedCourses}} class="w-full mb-4" />
       </div>