friends pages

bro.config.js

@@ -6,8 +6,8 @@ module.exports = {
   apiPath: 'stubs/api',
   webpackConfig: {
     output: {
-      publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`
-    }
+      publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
+    },
   },
   /* use https://admin.bro-js.ru/ to create config, navigations and features */
   navigations: {
@@ -15,11 +15,17 @@ module.exports = {
     'link.nav2.by': '/by/:userId',
   },
   features: {
-    'nav2': {
+    nav2: {
       // add your features here in the format [featureName]: { value: string }
+      stars: {
+        value: '8',
+      },
+      buttons: {
+        value: 'true',
+      },
     },
   },
   config: {
-    'nav2.api': '/api'
-  }
+    'nav2.api': '/api',
+  },
 }

src/components/profile/profile.tsx

@@ -9,12 +9,11 @@ import {
   Center,
   HStack,
   Heading,
-  Icon,
   Input,
   Text,
   VStack,
 } from '@chakra-ui/react'
-import { FaRegStar, FaStar } from 'react-icons/fa6'
+import { getFeatures, getAllFeatures } from '@brojs/cli'
 import React, { memo, useState } from 'react'
 
 import { FormTest } from './from'
@@ -28,6 +27,10 @@ type User = Record<string, unknown> & {
   friends?: User[]
 }
 
+const features = getFeatures('nav2')
+
+
+
 export const Profile = ({
   user,
   isLink,
@@ -54,11 +57,17 @@ export const Profile = ({
             <Text fontWeight="bold">Имя: {user.name.toUpperCase()}</Text>
           </CardBody>
           <CardFooter>
-            <Stars rated={rated} setRated={setRated} />
+            {features['stars'] && (
+              <Stars
+                count={Number(features['stars']?.value) * 2}
+                rated={rated}
+                setRated={setRated}
+              />
+            )}
           </CardFooter>
         </Card>
       </Box>
-      {!isLink && <Counter value={rated} setValue={setRated} />}
+      {!isLink && features['buttons'] && <Counter value={rated} setValue={setRated} />}
     </Box>
   )
 }

src/components/stars.tsx

@@ -1,20 +1,38 @@
-import {
-  HStack,
-  Icon,
-} from '@chakra-ui/react'
+import { HStack, Icon } from '@chakra-ui/react'
 import { FaRegStar, FaStar } from 'react-icons/fa6'
-import React from 'react'
+import React, { useMemo, useState } from 'react'
+
+const useStars = (currentRated, starsCount) => {
+  const [rated, setRated] = useState(currentRated)
+  const stars = useMemo(
+    () =>
+      Array.from({ length: starsCount }).map((_, index) => index + 1 > rated),
+    [starsCount, rated],
+  )
+
+  return {
+    setRated,
+    stars,
+  }
+}
 
 export const Stars = ({
+  count,
   rated,
   setRated,
 }: {
+  count: number
   rated: number
   setRated: (rate: number) => void
 }) => {
+  // const {
+  //   stars,
+  //   setRated: starsSetRated
+  // } = useStars(rated, count)
+
   return (
     <HStack>
-      {Array.from({ length: 5 }).map((_, index) =>
+      {Array.from({ length: count }).map((_, index) =>
         index + 1 > rated ? (
           <Icon
             key={index}
@@ -29,7 +47,7 @@ export const Stars = ({
             key={index}
             color="orange.400"
             cursor="pointer"
-            onClick={() => setRated(index + 1)}
+            onClick={() => starsSetRated(index + 1)}
           >
             <FaStar />
           </Icon>

src/dashboard.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Navigate, Route, Routes } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom'
 import { Container } from '@chakra-ui/react'
 
 import { URLs } from './__data__/urls'