Skip to content

Commit

Permalink
✨ StarGroup
Browse files Browse the repository at this point in the history
  • Loading branch information
vbetsch committed Mar 1, 2024
1 parent 067295d commit 7fe23f9
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 28 deletions.
53 changes: 53 additions & 0 deletions src/components/rates/molecules/AppStarGroup.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<script setup lang="ts">
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faStar as faSolidStar } from '@fortawesome/free-solid-svg-icons';
import { faStar as faRegularStar } from '@fortawesome/free-regular-svg-icons';
import { getCurrentInstance, onMounted, ref } from 'vue';
import { checkMaxValue } from '../../ComponentErrorManager.ts';
export interface AppStarGroupProps {
value: number;
maxValue: number;
}
const props = defineProps<AppStarGroupProps>();
let errorComponent = ref('');
const checkComponent = () => {
try {
checkMaxValue(props.maxValue, props.value, getCurrentInstance()?.type.__name);
} catch (e: any) {
errorComponent.value = e.message;
throw e;
}
};
onMounted(checkComponent);
</script>

<template>
<div class="stars">
<FontAwesomeIcon v-for="star in value" :key="star" class="star" :icon="faSolidStar" />
<FontAwesomeIcon
v-for="star in maxValue - value"
:key="star"
class="icon"
:icon="faRegularStar"
/>
</div>
</template>

<style scoped>
.stars {
display: flex;
color: var(--light-grey);
justify-content: center;
align-items: center;
gap: 2px;
}
.star {
color: var(--yellow);
}
</style>
30 changes: 2 additions & 28 deletions src/views/BeerDetailsPage/atoms/PostItem.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<script setup lang="ts">
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faStar as faSolidStar } from '@fortawesome/free-solid-svg-icons';
import { faStar as faRegularStar } from '@fortawesome/free-regular-svg-icons';
import AppStarGroup from '../../../components/rates/molecules/AppStarGroup.vue';
export interface PostItemProps {
content: string;
Expand All @@ -13,20 +11,7 @@ defineProps<PostItemProps>();

<template>
<div class="post">
<div class="stars">
<FontAwesomeIcon
v-for="star in starsNumber"
:key="star"
class="star"
:icon="faSolidStar"
/>
<FontAwesomeIcon
v-for="star in 5 - starsNumber"
:key="star"
class="icon"
:icon="faRegularStar"
/>
</div>
<AppStarGroup :max-value="5" :value="starsNumber" />
<span>{{ content }}</span>
</div>
</template>
Expand All @@ -38,15 +23,4 @@ defineProps<PostItemProps>();
align-items: center;
gap: 15px;
}
.stars {
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
}
.star {
color: var(--yellow);
}
</style>

0 comments on commit 7fe23f9

Please sign in to comment.