---
import Layout from '../layouts/ExamplesLayout.astro'
import Card from '../components/Examples/Card.astro'
import {Markdown} from 'astro/components'
import templateData from '../components/Examples/Functions/get-examples-data.js'
let data = await templateData()
let headers = {}
---
<Layout content={data}>
    <Markdown>
       # Examples & Templates
        We encourage you to freely explore our collection of ready-made templates containing a multitude of examples on how to apply Astro to a variety of use-cases. i.e: various UI frameworks, State Management Tools, and of course TailwindCSS.


        To use any one of our templates simply instruct `create-astro`by using:

        ```bash
            npm init astro my-astro-project -- -- template [template]
        ```
    </Markdown>
    <Markdown>
        ## `create-astro` Templates
        
        Below is a list of Astro's templates that are available directly through the [`create-astro`](/installation) install wizard. 
    </Markdown>
    <div class="flexbox">
        {data.filter(item=> (item.pkgJSON?.keywords?.includes('create-astro')))
                .sort((a,b)=> ((a.name === 'starter')? -1 : 1))
                .map((item)=>(<Card data={item}/>))}
    </div>
    <Markdown>
        ## UI Frameworks 
        
        Astro is always growing its support for the vast plethora of UI frameworks that exist within the JavaScript ecosystem. Below are demonstrations on how UI frameworks work inside Astro
    </Markdown>
    <div class="flexbox">
        {data.filter(item=> (item.pkgJSON?.keywords?.includes('framework')))
                .sort((a,b)=> (b.name > a.name) ? 1 : -1)
                .sort((a,b)=> ((a.name === 'framework-multiple') ? 0 : -1))
                .map((item)=>(<Card data={item}/>))}
    </div>
    <Markdown>
        ## Kitchen Sink
        
        Here is a further set of examples that have been created by our developer team, to help our users with working examples on using Markdown with Astro. Support for plugins such as Nanostores and TailwindCSS
    </Markdown>
    <div class="flexbox">
        {data.filter(item=> (item.pkgJSON?.keywords?.includes('kitchen-sink')))
                .map((item)=>(<Card data={item}/>))}
    </div>
    <Markdown>
        
        ##  Community Templates
        
        Visit [Awesome-Astro](https://github.com/one-aalam/awesome-astro) for a full list of community examples.
        
        You can use `npm init astro` to pull down and utilise any of the wonderful community examples
    </Markdown>
    <Markdown >

        ```bash
        npm init astro -- --template [GITHUB_USER]/[REPO_NAME]
        npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
        ```
    </Markdown>
</Layout>
<style lang="scss">
    .flexbox{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: center;
        justify-content: space-evenly;
        align-items: center;
        gap: 2rem;
        margin-top:1.25rem;
        scroll-behavior: smooth;
        padding: 2 rem;
        
    }
    .markdown{
        padding:2%;
        line-height: 1.25rem;
    }


</style>