95 lines
1.8 KiB
Vue
95 lines
1.8 KiB
Vue
<template>
|
|
<div class="project">
|
|
<h2 class="heading--3">
|
|
{{ title }}
|
|
</h2>
|
|
<span class="project__type">{{ type }}</span>
|
|
<div class="project__description">
|
|
<slot/>
|
|
</div>
|
|
<hr class="project__divider"/>
|
|
<div class="project__buttons">
|
|
<GButton v-if="link" class="project__button" :href="link">
|
|
Open
|
|
<template v-slot:suffix>
|
|
<ArrowRightIcon/>
|
|
</template>
|
|
</GButton>
|
|
<GButton v-if="github" class="project__button" :href="`https://github.com/${github}`">
|
|
GitHub
|
|
<template v-slot:prefix>
|
|
<GitHubIcon/>
|
|
</template>
|
|
</GButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import "~@/assets/css/variables";
|
|
|
|
.project__type {
|
|
margin-top: -1.2rem;
|
|
margin-bottom: 1rem;
|
|
display: block;
|
|
}
|
|
|
|
.project__description {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.project__divider {
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
width: 175px;
|
|
height: 1px;
|
|
background-color: black;
|
|
|
|
border: none;
|
|
}
|
|
|
|
.project__buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.project__button {
|
|
&:not(:last-child) {
|
|
margin-right: $small-gutter;
|
|
}
|
|
}
|
|
|
|
.project__button-icon {
|
|
width: 10px;
|
|
display: inline;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import ArrowRightIcon from "@/assets/icons/arrow_right.svg";
|
|
import GitHubIcon from "@/assets/icons/github.svg";
|
|
import GButton from "@/components/GButton";
|
|
|
|
export default {
|
|
name: "GProject",
|
|
components: { GButton, ArrowRightIcon, GitHubIcon },
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
type: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
link: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
github: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
}
|
|
};
|
|
</script>
|