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/assets/lottie/404.json

@@ -1 +1 @@
-{"v":"5.7.4","fr":60,"ip":0,"op":420,"w":500,"h":500,"nm":"404","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"body Outlines 3","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":-9.244,"ix":3},"y":{"a":0,"k":5.179,"ix":4}},"a":{"a":0,"k":[93.17,33.023,0],"ix":1,"l":2},"s":{"a":0,"k":[-51,51,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-3.869,-2.31],[13.83,0],[3.869,2.29],[-13.84,0]],"o":[[-0.8,13.63],[-4.831,0],[0.79,-13.63],[4.83,0]],"v":[[19.58,-10.4],[-6.36,14.03],[-19.58,10.42],[6.351,-14.03]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.811764765721,0.811764765721,0.811764765721,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[94.693,35.619],"ix":2},"a":{"a":0,"k":[-18.427,9.089],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":19,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"leaf outline","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-3.869,-2.31],[13.83,0],[3.357,1.321]],"o":[[-0.8,13.63],[-4.831,0],[29.789,-4.078]],"v":[[19.579,-10.4],[-6.36,14.03],[-19.58,10.42]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.811764765721,0.811764765721,0.811764765721,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[94.693,35.619],"ix":2},"a":{"a":0,"k":[-18.427,9.089],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":19,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"leaf shadow","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-3.869,-2.31],[13.83,0],[3.869,2.29],[-13.84,0]],"o":[[-0.8,13.63],[-4.831,0],[0.79,-13.63],[4.83,0]],"v":[[19.58,-10.4],[-6.36,14.03],[-19.58,10.42],[6.351,-14.03]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.811764765721,0.811764765721,0.811764765721,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[94.693,35.619],"ix":2},"a":{"a":0,"k":[-18.427,9.089],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":31,"s":[19]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":43,"s":[59]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":55,"s":[-47]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":65,"s":[19]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":95,"s":[19]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":107,"s":[59]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":119,"s":[-47]},{"t":129,"s":[19]}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"leaf","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":420,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"body Outlines 2","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":-9.244,"ix":3},"y":{"a":0,"k":5.179,"ix":4}},"a":{"a":0,"k":[93.17,33.023,0],"ix":1,"l":2},"s":{"a":0,"k":[51,51,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-3.869,-2.31],[13.83,0],[3.869,2.29],[-13.84,0]],"o":[[-0.8,13.63],[-4.831,0],[0.79,-13.63],[4.83,0]],"v":[[19.58,-10.4],[-6.36,14.03],[-19.58,10.42],[6.351,-14.03]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.811764765721,0.811764765721,0.811764765721,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[94.693,35.619],"ix":2},"a":{"a":0,"k":[-18.427,9.089],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":19,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"leaf outline","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-3.869,-2.31],[13.83,0],[3.357,1.321]],"o":[[-0.8,13.63],[-4.831,0],[29.789,-4.078]],"v":[[19.579,-10.4],[-6.36,14.03],[-19.58,10.42]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.811764765721,0.811764765721,0.811764765721,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[94.693,3Line truncated
+{"nm":"Main Scene","ddd":0,"h":500,"w":500,"meta":{"g":"@lottiefiles/creator 1.31.1"},"layers":[{"ty":0,"nm":"Nested Scene 3","sr":1,"st":0,"op":120,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[250,188]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[213.6175,200.474]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"w":500,"h":500,"refId":"precomp_newScene_21340fc0-212f-4f08-ba6e-ea76e8a3f167","ind":1},{"ty":0,"nm":"Nested Scene 2","sr":1,"st":0,"op":120,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[250,188]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[281.185,201.5135]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"w":500,"h":500,"refId":"precomp_newScene_21340fc0-212f-4f08-ba6e-ea76e8a3f167","ind":2},{"ty":4,"nm":"Zero Front","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[63.5,77.5]},"s":{"a":1,"k":[{"o":{"x":0.65,"y":0},"i":{"x":0.36,"y":1},"s":[100,100],"t":12},{"o":{"x":0.65,"y":0},"i":{"x":0.36,"y":1},"s":[120,119.99999999999997],"t":30},{"o":{"x":0.65,"y":0},"i":{"x":0.36,"y":1},"s":[119.99999999999997,120],"t":90},{"s":[100,100],"t":108}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.65,"y":0},"i":{"x":0.36,"y":1},"s":[250,245.3162],"t":12},{"o":{"x":0.65,"y":0},"i":{"x":0.36,"y":1},"s":[257.6085,250],"t":18},{"o":{"x":0.65,"y":0},"i":{"x":0.36,"y":1},"s":[272.8254,229.6779],"t":30},{"o":{"x":0.65,"y":0},"i":{"x":0.36,"y":1},"s":[235.0082,229.67789999999997],"t":90},{"o":{"x":0.65,"y":0},"i":{"x":0.36,"y":1},"s":[250,250],"t":102},{"s":[250,245.3162],"t":108}]},"r":{"a":1,"k":[{"o":{"x":0.65,"y":0},"i":{"x":0.36,"y":1},"s":[0],"t":12},{"o":{"x":0.65,"y":0},"i":{"x":0.36,"y":1},"s":[7],"t":30},{"o":{"x":0.65,"y":0},"i":{"x":0.36,"y":1},"s":[-10],"t":90},{"s":[0],"t":108}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","bm":0,"ln":"zero-front","hd":false,"nm":"Zero Front","it":[{"ty":"sh","bm":0,"ln":"zero-front","hd":false,"nm":"zero-front","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,-23.323999999999998],[-10.065,-13.709999999999994],[0,0],[-20.9146,0],[-10.299099999999996,13.700999999999993],[0,0],[0,23.329300000000003],[10.205999999999989,13.579100000000004],[20.7885,0],[10.300699999999999,-13.703560000000001]],"o":[[0,0],[0,0],[-10.06977,13.579800000000002],[0,23.3253],[0,0],[10.300699999999999,13.704000000000008],[20.7842,0],[0,0],[10.203999999999994,-13.710999999999999],[0,-23.194599999999994],[-10.296500000000009,-13.834779999999999],[-20.9146,0],[0,0]],"v":[[16.5226,21.952],[16.5226,21.952],[16.5168,21.9599],[1.5,77.3997],[16.5125,133.034],[16.5226,133.048],[63.5,153.5],[110.276,133.048],[110.28,133.042],[125.5,77.3997],[110.278,22.1558],[63.5,1.5],[16.5226,21.952]]}}},{"ty":"sh","bm":0,"ln":"zero-front","hd":false,"nm":"zero-front","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-10.6391],[2.0456000000000074,-5.216300000000004],[1.8742000000000019,-1.1470000000000056],[3.0952999999999946,0],[1.9248000000000047,1.1600000000000108],[0.9682999999999993,2.404999999999987],[0,10.767800000000008],[-2.042100000000005,5.076700000000002],[0,0],[0,0],[-1.9070999999999998,1.1781000000000006],[-3.161900000000003,0],[-1.887900000000002,-1.1842000000000041],[-0.9756,-2.485999999999997]],"o":[[0,0],[2.0420999999999907,5.076700000000002],[0,10.767800000000008],[-0.9710000000000036,2.410999999999987],[-1.8906000000000063,1.1569999999999965],[-3.1677999999999997,0],[-1.9063999999999979,-1.149000000000001],[-2.0457000000000036,-5.216300000000004],[0,-10.6391],[0,0],[0,0],[0.9730999999999952,-2.4795000000000016],[1.9220000000000041,-1.1873000000000005],[3.0892000000000053,0],[1.8751999999999924,1.1761999999999944],[0,0]],"v":[[75.212,53.8831],[75.2167,53.8949],[78.335,77.3997],[75.2144,101.311],[70.935,106.602],[63.5,108.387],[55.9051,106.597],[51.584,101.311],[48.4633,77.3997],[51.5816,53.8949],[51.5817,53.8949],[51.5863,53.8831],[55.9192,48.4447],[63.5,46.6131],[70.9209,48.4393],[75.212,53.8831]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":4,"o":{"a":0,"k":100},"w":{"a":0,"k":3},"c":{"a":0,"k":[0.3804,0.9686,0.8118]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0,0.8667,0.702]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[63.5,77.5]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[63.5,77.5]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":3},{"ty":4,"nm":"Static","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ln":"static","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[195.5,73.90379999999999]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250,248]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","bm":0,"ln":"four-front-left","hd":false,"nm":"Four Front Left","it":[{"ty":"sh","bm":0,"ln":"four-front-left","hd":false,"nm":"Four Front Left","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0Line truncated

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 {
+import { HStack, Icon } from '@chakra-ui/react'
-  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'