Create Tabs View, ViewComponent and Model

DotnetViewComponents/ViewComponents/TabsViewComponent.cs

@@ -0,0 +1,18 @@
+namespace DotnetViewComponents.ViewComponents
+{
+    using System.Collections.Generic;
+    using Microsoft.AspNetCore.Mvc;
+    using DotnetViewComponents.ViewModels;
+
+    public class TabsViewComponent : ViewComponent
+    {
+        public IViewComponentResult Invoke(
+            string title,
+            List<TabViewModel> tabsList)
+        {
+            var model = new TabsViewModel(title, tabsList);
+
+            return View(model);
+        }
+    }
+}

DotnetViewComponents/ViewModels/TabsViewModel.cs

@@ -0,0 +1,38 @@
+using Microsoft.AspNetCore.Html;
+
+namespace DotnetViewComponents.ViewModels
+{
+    public class TabsViewModel
+    {
+        public TabsViewModel(
+            string title,
+            List<TabViewModel> tabsList)
+        {
+            Title = title;
+            TabsList = tabsList;
+        }
+
+        public string Title { get; set; }
+        public List<TabViewModel> TabsList { get; set; }
+
+    }
+
+    public class TabViewModel
+    {
+        public TabViewModel(
+            string name,
+            Func<object, IHtmlContent> content,
+            bool isActive)
+        {
+            Name = name;
+            Content = content;
+            IsActive = isActive;
+        }
+
+        public string Name { get; set; }
+
+        public Func<object, IHtmlContent> Content { get; set; }
+
+        public bool IsActive { get; set; }
+    }
+}

DotnetViewComponents/Views/Shared/Components/Tabs/Default.cshtml

@@ -0,0 +1,29 @@
+@using DotnetViewComponents.ViewModels
+@model TabsViewModel
+
+<div class="nhsuk-tabs js-enabled" data-module="nhsuk-tabs">
+    <h2 class="nhsuk-tabs__title">
+        @Model.Title
+    </h2>
+
+    <ul class="nhsuk-tabs__list">
+
+        @foreach (var tab in Model.TabsList)
+        {
+            <li class="nhsuk-tabs__list-item @(tab.IsActive ? "nhsuk-tabs__list-item--selected" : "")">
+                <a class="nhsuk-tabs__tab" href="#@tab.Name.ToLower().Replace(" ", "-")">
+                    @tab.Name
+                </a>
+            </li>
+        }
+    </ul>
+
+    @foreach (var tab in Model.TabsList)
+    {
+        <div class="nhsuk-tabs__panel @(!tab.IsActive ? "nhsuk-tabs__panel--hidden" : "")" id="@tab.Name.ToLower().Replace(" ", "-")">
+			@tab.Content(null)
+        </div>
+    }
+
+
+</div>