chore: update component name and fix unnecessary style import

ui/src/components/Header/index.scss

@@ -1,4 +1,5 @@
-@import '~bootstrap/scss/bootstrap-utilities';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
 #header {
   background: linear-gradient(180deg, #0033FF 0%, rgba(0, 51, 255, 0.95) 100%);
   --bs-navbar-padding-y: 0.75rem;

ui/src/components/Header/index.tsx

@@ -56,9 +56,9 @@ const Header: FC = () => {
   useEffect(() => {
     const collapse = document.querySelector('#navBarContent');
     if (collapse && collapse.classList.contains('show')) {
-      const toogle = document.querySelector('#navBarToggle') as HTMLElement;
+      const toggle = document.querySelector('#navBarToggle') as HTMLElement;
-      if (toogle) {
+      if (toggle) {
-        toogle?.click();
+        toggle?.click();
       }
     }
   }, [location.pathname]);

ui/src/components/QueryGroup/index.tsx

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 
 interface Props {
   data;
-  i18nkeyPrefix: string;
+  i18nKeyPrefix: string;
   currentSort: string;
   sortKey?: string;
   className?: string;
@@ -17,13 +17,13 @@ const Index: FC<Props> = ({
   data = [],
   currentSort = '',
   sortKey = 'order',
-  i18nkeyPrefix = '',
+  i18nKeyPrefix = '',
   className = '',
 }) => {
   const [searchParams, setUrlSearchParams] = useSearchParams();
 
   const { t } = useTranslation('translation', {
-    keyPrefix: i18nkeyPrefix,
+    keyPrefix: i18nKeyPrefix,
   });
 
   const handleParams = (order): string => {

ui/src/components/QuestionList/index.tsx

@@ -115,7 +115,7 @@ const QuestionList: FC<Props> = ({ source }) => {
           <QueryGroup
             data={QuestionOrderKeys}
             currentSort={curOrder}
-            i18nkeyPrefix="question"
+            i18nKeyPrefix="question"
           />
         </Col>
       </Row>

ui/src/pages/Admin/Answers/index.tsx

@@ -85,7 +85,7 @@ const Answers: FC = () => {
           data={answerFilterItems}
           currentSort={curFilter}
           sortKey="status"
-          i18nkeyPrefix="admin.answers"
+          i18nKeyPrefix="admin.answers"
         />
 
         <Form.Control

ui/src/pages/Admin/Flags/index.tsx

@@ -62,7 +62,7 @@ const Flags: FC = () => {
           data={flagFilterKeys}
           currentSort={curFilter}
           sortKey="status"
-          i18nkeyPrefix="admin.flags"
+          i18nKeyPrefix="admin.flags"
         />
 
         <Form.Select

ui/src/pages/Admin/Questions/index.tsx

@@ -104,7 +104,7 @@ const Questions: FC = () => {
           data={questionFilterItems}
           currentSort={curFilter}
           sortKey="status"
-          i18nkeyPrefix="admin.questions"
+          i18nKeyPrefix="admin.questions"
         />
 
         <Form.Control

ui/src/pages/Admin/Users/index.tsx

@@ -67,7 +67,7 @@ const Users: FC = () => {
           data={UserFilterKeys}
           currentSort={curFilter}
           sortKey="filter"
-          i18nkeyPrefix="admin.users"
+          i18nKeyPrefix="admin.users"
         />
 
         <Form.Control

ui/src/pages/Questions/Detail/components/AnswerHead/index.tsx

@@ -34,7 +34,7 @@ const Index: FC<Props> = ({ count = 0, order = 'default' }) => {
       <QueryGroup
         data={sortBtns}
         currentSort={order === 'updated' ? 'newest' : 'score'}
-        i18nkeyPrefix="question_detail.answers"
+        i18nKeyPrefix="question_detail.answers"
       />
     </div>
   );

ui/src/pages/Questions/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PageTitle, FollowingTags } from '@answer/components';
 
-import QuestionList from '@/components/Questions';
+import QuestionList from '@/components/QuestionList';
 import HotQuestions from '@/components/HotQuestions';
 import { siteInfoStore } from '@/stores';
 

ui/src/pages/Search/components/SearchHead/index.tsx

@@ -22,7 +22,7 @@ const Index: FC<Props> = ({ sort, count = 0 }) => {
         data={sortBtns}
         currentSort={sort}
         sortKey="order"
-        i18nkeyPrefix="search.sort_btns"
+        i18nKeyPrefix="search.sort_btns"
       />
     </ListGroupItem>
   );

ui/src/pages/Tags/Detail/index.tsx

@@ -7,7 +7,7 @@ import * as Type from '@answer/common/interface';
 import { PageTitle, FollowingTags } from '@answer/components';
 import { useTagInfo, useFollow } from '@answer/api';
 
-import QuestionList from '@/components/Questions';
+import QuestionList from '@/components/QuestionList';
 import HotQuestions from '@/components/HotQuestions';
 
 const Questions: FC = () => {

ui/src/pages/Tags/index.tsx

@@ -60,7 +60,7 @@ const Tags = () => {
                 data={sortBtns}
                 currentSort={sort || 'popular'}
                 sortKey="sort"
-                i18nkeyPrefix="tags.sort_buttons"
+                i18nKeyPrefix="tags.sort_buttons"
               />
             </div>
           </Col>

ui/src/pages/Users/Personal/components/ListHead/index.tsx

@@ -32,7 +32,7 @@ const Index: FC<Props> = ({
         <QueryGroup
           data={sortBtns}
           currentSort={sort}
-          i18nkeyPrefix="personal"
+          i18nKeyPrefix="personal"
         />
       )}
     </div>