diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
index be45f18..2b707f2 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -1,21 +1,28 @@
-
-
-
-
-
+
+
+
+
+
+
4.95 out of 5
+
+
73 reviews
diff --git a/src/components/Rating/composables/useRatingClasses.ts b/src/components/Rating/composables/useRatingClasses.ts
new file mode 100644
index 0000000..177a1a6
--- /dev/null
+++ b/src/components/Rating/composables/useRatingClasses.ts
@@ -0,0 +1,27 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import classNames from 'classnames'
+import type { RatingSize } from '../types'
+
+const ratingSizeClasses: Record = {
+ sm: 'w-5 h-5',
+ md: 'w-7 h-7',
+ lg: 'w-10 h-10'
+}
+
+export function useRatingClasses(props: UseRatingClassesProps):{
+ sizeClasses: Ref
+}{
+ const sizeClasses = computed(() => {
+ let sizeClass = ''
+ sizeClass = ratingSizeClasses[props.size.value]
+ return classNames(
+ sizeClass
+ )
+ })
+
+
+ return {
+ sizeClasses
+ }
+}
\ No newline at end of file
diff --git a/src/components/Rating/types.ts b/src/components/Rating/types.ts
new file mode 100644
index 0000000..f6f279e
--- /dev/null
+++ b/src/components/Rating/types.ts
@@ -0,0 +1 @@
+export type RatingSize = 'sm' | 'md' | 'lg'
\ No newline at end of file