Added in the static front-end of the pagination

refs https://github.com/TryGhost/Team/issues/1984

ghost/admin/app/styles/layouts/content.css

@@ -936,15 +936,6 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
     border-radius: var(--border-radius);
 }
 
-.gh-links-list-item:first-child {
-    padding-top: 0;
-}
-
-.gh-links-list-item:last-child {
-    padding-bottom: 0;
-    border-bottom: none;
-}
-
 .gh-links-list-item {
     display: flex;
     justify-content: space-between;
@@ -956,6 +947,19 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
     text-decoration: none;
 }
 
+.gh-links-list-item:first-child {
+    padding-top: 0;
+}
+
+.gh-links-list-item:last-child {
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.gh-links-list > .gh-links-list-item:last-child {
+    border-bottom: 0 none;
+}
+
 .gh-links-list-item a {
     margin: 0;
     padding: 0 32px 0 0;
@@ -975,6 +979,79 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
     color: var(--darkgrey);
 }
 
+.gh-links-pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: calc(100% + 40px);
+    background: linear-gradient(180deg, #FBFBFB 0%, #FFFFFF 50%);
+    padding: 20px;
+    margin: -1px -20px -20px -20px;
+    border-top: 1px solid var(--lightgrey-l1);
+    border-radius: 0 0 3px 3px;
+}
+
+.gh-links-pagination-progress {
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 16px;
+    letter-spacing: 0.01em;
+    color: var(--midlightgrey);
+}
+
+.gh-links-pagination-actions {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
+
+.gh-links-pagination-action {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    color: var(--green);
+    font-weight: 600;
+    font-size: 13px;
+    line-height: 16px;
+    letter-spacing: 0.01em;
+    transition: color .2s linear;
+}
+
+.gh-links-pagination-action.gh-links-pagination-prev {
+    position: relative;
+    padding-right: 20px;
+}
+
+.gh-links-pagination-action.gh-links-pagination-prev:after {
+    content: "";
+    position: absolute;
+    top: 20%;
+    bottom: 20%;
+    right: 0;
+    background: var(--lightgrey);
+    border-radius: 2px;
+    width: 1.5px;
+    height: 60%;
+}
+
+.gh-links-pagination-action svg {
+    width: 6px;
+    fill: var(--green);
+    stroke: var(--green);
+    transition: all .2s linear;
+}
+
+.gh-links-pagination-action:hover {
+    color: var(--green-d2);
+}
+
+.gh-links-pagination-action:hover svg {
+    fill: var(--green-d2);
+    stroke: var(--green-d2);
+}
+
 /* Post list – LABS
 /* ---------------------------------------------------------- */
 

ghost/admin/app/templates/posts/analytics.hbs

@@ -106,6 +106,23 @@
                                 <p class="gh-links-list-clicks">{{link.count.clicks}}</p>
                             </div>
                         {{/each}}
+                        {{!-- TODO: Wire this pagination up
+                        <div class="gh-links-pagination">
+                            <div class="gh-links-pagination-progress">
+                                Showing 10-20 of 24
+                            </div>
+                            <div class="gh-links-pagination-actions">
+                                <button type="button" class="gh-links-pagination-action gh-links-pagination-prev">
+                                    {{svg-jar "arrow-left-pagination"}}
+                                    Previous
+                                </button>
+                                <button type="button" class="gh-links-pagination-action gh-links-pagination-next">
+                                    Next
+                                    {{svg-jar "arrow-right-pagination"}}
+                                </button>
+                            </div>
+                        </div>
+                        --}}
                     </div>
                 </div>
             {{/if}}

ghost/admin/public/assets/icons/arrow-left-pagination.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="23" viewBox="0 0 14 23" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_173_12420)">
+<path d="M12.5756 1.45462C12.8529 1.74002 13.0055 2.12392 12.9999 2.52188C12.9942 2.91984 12.8308 3.29927 12.5456 3.5767L4.39603 11.5052L12.5456 19.4338C12.8262 19.7122 12.9856 20.0902 12.9892 20.4856C12.9928 20.881 12.8403 21.2618 12.5648 21.5453C12.2893 21.8288 11.9132 21.9921 11.518 21.9997C11.1229 22.0073 10.7407 21.8586 10.4546 21.5858L1.63451 13.006C1.43419 12.8107 1.27487 12.5774 1.16591 12.3197C1.05696 12.0619 1.00055 11.7851 1 11.5052C0.9997 11.2253 1.05572 10.9481 1.16473 10.6903C1.27374 10.4325 1.4335 10.1992 1.63451 10.0045L10.4546 1.42461C10.7398 1.1472 11.1235 0.994521 11.5213 1.00015C11.9191 1.00578 12.2983 1.16926 12.5756 1.45462V1.45462Z" stroke-width="0.25"/>
+</g>
+<defs>
+<clipPath id="clip0_173_12420">
+<rect width="14" height="23" fill="white"/>
+</clipPath>
+</defs>
+</svg>

ghost/admin/public/assets/icons/arrow-right-pagination.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="23" viewBox="0 0 14 23" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_173_12425)">
+<path d="M1.42439 1.45462C1.14713 1.74002 0.994524 2.12392 1.00015 2.52188C1.00578 2.91984 1.16917 3.29927 1.4544 3.5767L9.60397 11.5052L1.4544 19.4338C1.17382 19.7122 1.01441 20.0902 1.01082 20.4856C1.00722 20.881 1.15973 21.2618 1.4352 21.5453C1.71067 21.8288 2.08685 21.9921 2.48198 21.9997C2.87711 22.0073 3.25927 21.8586 3.54541 21.5858L12.3655 13.006C12.5658 12.8107 12.7251 12.5774 12.8341 12.3197C12.943 12.0619 12.9995 11.7851 13 11.5052C13.0003 11.2253 12.9443 10.9481 12.8353 10.6903C12.7263 10.4325 12.5665 10.1992 12.3655 10.0045L3.54541 1.42461C3.26016 1.1472 2.87645 0.994521 2.47869 1.00015C2.08093 1.00578 1.70169 1.16926 1.42439 1.45462V1.45462Z" stroke-width="0.25"/>
+</g>
+<defs>
+<clipPath id="clip0_173_12425">
+<rect width="14" height="23" fill="white"/>
+</clipPath>
+</defs>
+</svg>