mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-18 06:44:46 -07:00
76 lines
2.5 KiB
Text
76 lines
2.5 KiB
Text
---
|
|
// Component Script:
|
|
// You can write any JavaScript/TypeScript that you'd like here.
|
|
// It will run during the build, but never in the browser.
|
|
// All variables are available to use in the HTML template below.
|
|
|
|
// Full Astro Component Syntax:
|
|
// https://docs.astro.build/core-concepts/astro-components/
|
|
|
|
import { DoesItAPI } from '~/helpers/api/client.js'
|
|
|
|
import Layout from '../layouts/default.astro'
|
|
|
|
const kindIndex = await DoesItAPI.kind.index.get()
|
|
|
|
const kinds = Object.values( kindIndex )
|
|
---
|
|
<Layout
|
|
headOptions={ {
|
|
title: 'Categories of App Support lists for Apple Silicon',
|
|
description: 'List of compatibility apps and games for Apple Silicon and the Apple M1 Pro and M1 Max Processors including performance reports and benchmarks',
|
|
// meta,
|
|
// link,
|
|
// structuredData: this.structuredData,
|
|
|
|
// domain,
|
|
pathname: '/categories',
|
|
} }
|
|
>
|
|
|
|
<main class="container py-24">
|
|
<div class="flex flex-col">
|
|
<h1 class="title text-2xl leading-tight mb-6">
|
|
Categories
|
|
</h1>
|
|
|
|
<div class="line-separator border-white border-t-2 mb-12" />
|
|
|
|
<!-- categoryList: {{ categoryList }} -->
|
|
|
|
<ul class="categories-list space-y-3">
|
|
{ kinds.map( category => (
|
|
<li
|
|
class="relative"
|
|
>
|
|
<a
|
|
href={ `/kind/${ category.kindName }` }
|
|
class="flex justify-start items-center inset-x-0 text-3xl md:text-4xl hover:bg-darkest border-2 border-white border-opacity-0 hover:border-opacity-50 focus:outline-none focus:bg-gray-50 duration-300 ease-in-out rounded-lg space-x-3 -mx-5 px-5 md:pr-64 py-3"
|
|
style="transition-property: border;"
|
|
>
|
|
<div class="font-hairline">
|
|
<h2>{ category.label }</h2>
|
|
<div class="text-xs opacity-75 mb-3">{ category.description }</div>
|
|
</div>
|
|
<div>➔</div>
|
|
</a>
|
|
|
|
</li>
|
|
)) }
|
|
</ul>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!--
|
|
|
|
You can also use imported framework components directly in your markup!
|
|
|
|
Note: by default, these components are NOT interactive on the client.
|
|
The `:visible` directive tells Astro to make it interactive.
|
|
|
|
See https://docs.astro.build/core-concepts/component-hydration/
|
|
|
|
-->
|
|
|
|
</Layout>
|