Add sort system + button

app/components/sort-buttons.css

@@ -0,0 +1,11 @@
+.sort-container {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .sort-container span {
+    color: var(--color-black);
+    font-weight: 500;
+  } 

app/components/sort-buttons.hbs

@@ -0,0 +1,16 @@
+{{! app/components/sort-buttons.hbs }}
+<div local-class="sort-container">
+  <span>Sort by:</span>
+  <EsButton
+    @label="Name {{if @isNameSort (if @isAscending '↑' '↓')}}"
+    @onClicked={{this.onSortByName}}
+    @secondary={{true}}
+    data-test-button="sort-by-name"
+  />
+  <EsButton
+    @label="Forks {{if @isForksSort (if @isAscending '↑' '↓')}}"
+    @onClicked={{this.onSortByForks}}
+    @secondary={{true}}
+    data-test-button="sort-by-forks"
+  />
+</div> 

app/components/sort-buttons.js

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class SortButtonsComponent extends Component {
+  @action
+  onSortByName() {
+    this.args.onSortByName();
+  }
+
+  @action
+  onSortByForks() {
+    this.args.onSortByForks();
+  }
+} 

app/controllers/index.js

@@ -0,0 +1,42 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class IndexController extends Controller {
+  @tracked sortField = 'name';
+  @tracked sortDirection = 'asc';
+
+  get sortedRepositories() {
+    const repositories = this.model;
+    const sortField = this.sortField;
+    const sortDirection = this.sortDirection;
+
+    return [...repositories].sort((a, b) => {
+      let aValue = sortField === 'name' ? a.name : a.forksCount;
+      let bValue = sortField === 'name' ? b.name : b.forksCount;
+
+      if (sortField === 'name') {
+        aValue = aValue.toLowerCase();
+        bValue = bValue.toLowerCase();
+      }
+
+      if (sortDirection === 'asc') {
+        return aValue > bValue ? 1 : -1;
+      } else {
+        return aValue < bValue ? 1 : -1;
+      }
+    });
+  }
+
+  @action
+  sortByName() {
+    this.sortDirection = this.sortField === 'name' && this.sortDirection === 'asc' ? 'desc' : 'asc';
+    this.sortField = 'name';
+  }
+
+  @action
+  sortByForks() {
+    this.sortDirection = this.sortField === 'forks' && this.sortDirection === 'asc' ? 'desc' : 'asc';
+    this.sortField = 'forks';
+  }
+} 

app/templates/index.hbs

@@ -14,9 +14,17 @@
         Repositories with help-wanted issues
       </h2>
 
+      <SortButtons 
+        @onSortByName={{this.sortByName}}
+        @onSortByForks={{this.sortByForks}}
+        @isNameSort={{eq this.sortField "name"}}
+        @isForksSort={{eq this.sortField "forks"}}
+        @isAscending={{eq this.sortDirection "asc"}}
+      />
+
       <div class="row">
         <ul class="list-unstyled layout">
-          {{#each @model as |githubRepository|}}
+          {{#each this.sortedRepositories as |githubRepository|}}
             <EsLinkCard
               class="lg:col-3 bg-dark"
               data-test-github-repository={{githubRepository.name}}