<script setup lang="ts">
import BackBtn from "./BackBtn.vue";
import ProjectCard from "./ProjectCard.vue";
import IProject from "../IProject.ts";

import { ref, onMounted } from "vue";
import axios from "axios";


const projects = ref<IProject[]>()

onMounted(async () => {
    const resp = await axios.get<IProject[]>('http://127.0.0.1:7632/api/get_repos')
    if (resp.status !== 200) return
    projects.value = resp.data
    console.log(projects.value)
})
</script>

<template>
  <BackBtn/>
    <div id="projects-container" class="wrapper pe-none">
        <ProjectCard v-for="(el, i) in projects"
                     :project="el"
                     :key="i"
        />
    </div>
</template>

<style scoped>
.wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}
</style>