From 987c7bc8eca9aa6e6806a1d8a1b105ed9fea2a63 Mon Sep 17 00:00:00 2001
From: Arik Chakma
Date: Fri, 26 Jul 2024 12:55:12 +0600
Subject: [PATCH] wip: roadmap ratings
---
.astro/settings.json | 2 +-
src/components/Rating/Rating.tsx | 100 +++++++++++++++++++++++++++++++
src/components/TeamsList.tsx | 3 +-
3 files changed, 103 insertions(+), 2 deletions(-)
create mode 100644 src/components/Rating/Rating.tsx
diff --git a/.astro/settings.json b/.astro/settings.json
index 70a6cda5c..6bf0f5b99 100644
--- a/.astro/settings.json
+++ b/.astro/settings.json
@@ -3,6 +3,6 @@
"enabled": false
},
"_variables": {
- "lastUpdateCheck": 1720192549979
+ "lastUpdateCheck": 1721975455427
}
}
\ No newline at end of file
diff --git a/src/components/Rating/Rating.tsx b/src/components/Rating/Rating.tsx
new file mode 100644
index 000000000..3ae749fbd
--- /dev/null
+++ b/src/components/Rating/Rating.tsx
@@ -0,0 +1,100 @@
+import { useState } from 'react';
+
+type RatingProps = {
+ ratings?: number;
+ starSize?: number;
+ readOnly?: boolean;
+};
+
+export function Rating(props: RatingProps) {
+ const { ratings = 0, starSize, readOnly = false } = props;
+
+ const [stars, setStars] = useState(Number(ratings.toFixed(2)));
+ const starCount = Math.floor(stars);
+ const decimalWidthPercentage = Math.min((stars - starCount) * 100, 100);
+
+ return (
+
+ {[1, 2, 3, 4, 5].map((counter) => {
+ const isActive = counter <= starCount;
+ const hasDecimal = starCount + 1 === counter;
+
+ return (
+ {
+ setStars(counter);
+ }}
+ readOnly={readOnly}
+ />
+ );
+ })}
+
+ );
+}
+
+type RatingStarProps = {
+ starSize?: number;
+ onClick: () => void;
+ widthPercentage?: number;
+ readOnly: boolean;
+};
+
+function RatingStar(props: RatingStarProps) {
+ const { onClick, widthPercentage = 100, starSize = 20, readOnly } = props;
+
+ return (
+
+ );
+}
diff --git a/src/components/TeamsList.tsx b/src/components/TeamsList.tsx
index ad173b9d6..b784cbd00 100644
--- a/src/components/TeamsList.tsx
+++ b/src/components/TeamsList.tsx
@@ -11,7 +11,7 @@ export function TeamsList() {
const toast = useToast();
async function getAllTeam() {
const { response, error } = await httpGet(
- `${import.meta.env.PUBLIC_API_URL}/v1-get-user-teams`
+ `${import.meta.env.PUBLIC_API_URL}/v1-get-user-teams`,
);
if (error || !response) {
toast.error(error?.message || 'Something went wrong');
@@ -36,6 +36,7 @@ export function TeamsList() {
Here are the teams you are part of
+