Rename components name

components/common/back-to-top.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import Button from 'components/RUA/Button';
+import Button from 'components/rua/button';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { FiChevronUp } from 'react-icons/fi';
 

components/dark-mode-btn.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import useMounted from 'lib/hooks/useMounted';
+import useMounted from 'lib/hooks/use-mounted';
 import { useTheme } from 'next-themes';
 import { memo } from 'react';
 import { FiMoon, FiSun } from 'react-icons/fi';

components/gists/file-content.tsx

@@ -1,12 +1,12 @@
-import LinkAnchor from 'components/mdx/LinkAnchor';
-import Loading from 'components/RUA/loading/RUALoading';
+import LinkAnchor from 'components/mdx/link-anchor';
+import Loading from 'components/rua/loading/rua-loading';
 import dayjs from 'dayjs';
 import { GistData } from 'lib/fetcher';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { memo, Suspense } from 'react';
 
-const GistsCode = dynamic(() => import('components/gists/GistsCode'), {
+const GistsCode = dynamic(() => import('components/gists/gists-code'), {
   suspense: true,
 });
 

components/gists/gists-code.tsx

@@ -7,7 +7,7 @@ import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import { GistsFile } from 'types';
 import { unified } from 'unified';
-import styles from './GistsCode.module.css';
+import styles from './gists-code.module.css';
 
 interface Props {
   file: GistsFile;

components/mdx/components.ts

@@ -1,11 +1,11 @@
-import Anchor from 'components/mdx/Anchor';
-import Image from 'components/mdx/Image';
-import Pre from 'components/mdx/Pre';
-import RUACodepen from 'components/RUA/RUACodepen';
-import RUACodeSandbox from 'components/RUA/RUACodeSandbox';
-import RUASandpack from 'components/RUA/RUASandpack';
-import Tab from 'components/RUA/tab';
-import TabItem from 'components/RUA/tab/TabItem';
+import Anchor from 'components/mdx/anchor';
+import Image from 'components/mdx/image';
+import Pre from 'components/mdx/pre';
+import RUACodepen from 'components/rua/rua-codepen';
+import RUACodeSandbox from 'components/rua/rua-code-sandbox';
+import RUASandpack from 'components/rua/rua-sandpack';
+import Tab from 'components/rua/tab';
+import TabItem from 'components/rua/tab/tab-item';
 
 const components = {
   RUASandpack,

components/mdx/pre.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import CopyButton from 'components/post/CopyButton';
-import useCopyToClipboard from 'lib/hooks/useCopyToClipboard';
+import CopyButton from 'components/post/copy-button';
+import useCopyToClipboard from 'lib/hooks/use-copy-to-clipboard';
 import {
   DetailedHTMLProps,
   HTMLAttributes,

components/nav-bar.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { memo, useEffect, useState } from 'react';
 import { FiMenu } from 'react-icons/fi';
 
-const DarkModeBtn = dynamic(() => import('components/DarkModeBtn'));
+const DarkModeBtn = dynamic(() => import('components/dark-mode-btn'));
 
 const txtMenu = [
   {

components/post/copy-button.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { memo, useState } from 'react';
-import styles from './CopytButton.module.css';
+import styles from './copyt-button.module.css';
 
 export type CopyButtonProps = {
   className?: string;

components/post/post-toc.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
-import Anchor from 'components/mdx/Anchor';
+import Anchor from 'components/mdx/anchor';
 import { SingleToc } from 'lib/utils';
 import { Fragment, memo, useState } from 'react';
 import { FiChevronDown } from 'react-icons/fi';
-import styles from './PostToc.module.css';
+import styles from './post-toc.module.css';
 
 interface Props {
   toc: SingleToc[];

components/rua/loading/rua-loading.tsx

@@ -9,7 +9,7 @@ type Props = {
   className?: string;
 };
 
-const RUALoading = ({ className: classNames }: Props) => {
+const RuaLoading = ({ className: classNames }: Props) => {
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme;
 
@@ -34,4 +34,4 @@ const RUALoading = ({ className: classNames }: Props) => {
   );
 };
 
-export default memo(RUALoading);
+export default memo(RuaLoading);

components/rua/loading/vercel-loading.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { memo } from 'react';
-import styles from './VercelLoading.module.css';
+import styles from './vercel-loading.module.css';
 
 const VercelLoading = () => {
   return (

components/rua/rua-code-sandbox.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
-import useInView from 'lib/hooks/useInView';
+import useInView from 'lib/hooks/use-in-view';
 import { useTheme } from 'next-themes';
 import { memo, useEffect, useState } from 'react';
-import RUALoading from './loading/RUALoading';
+import RUALoading from './loading/rua-loading';
 
 const pattern =
   /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)/;
@@ -15,7 +15,7 @@ type Props = {
   url: string;
 };
 
-const RUACodeSandbox = ({ url }: Props) => {
+const RuaCodeSandbox = ({ url }: Props) => {
   const isUrl = pattern.test(url);
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme ?? 'light';
@@ -64,4 +64,4 @@ const RUACodeSandbox = ({ url }: Props) => {
   );
 };
 
-export default memo(RUACodeSandbox);
+export default memo(RuaCodeSandbox);

components/rua/rua-codepen.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
-import useInView from 'lib/hooks/useInView';
+import useInView from 'lib/hooks/use-in-view';
 import { useTheme } from 'next-themes';
 import { memo, useEffect, useState } from 'react';
-import RUALoading from './loading/RUALoading';
+import RUALoading from './loading/rua-loading';
 
 export const commonClass = clsx(
   'rounded-lg h-[400px] border-0',
@@ -14,7 +14,7 @@ type Props = {
   url: string;
 };
 
-const RUACodepen = ({ defaultTab, url }: Props) => {
+const RuaCodepen = ({ defaultTab, url }: Props) => {
   const urlArr = url.split('/');
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme ?? 'light';
@@ -80,4 +80,4 @@ const RUACodepen = ({ defaultTab, url }: Props) => {
   );
 };
 
-export default memo(RUACodepen);
+export default memo(RuaCodepen);

components/rua/rua-pagination.tsx

@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { DetailedHTMLProps, HTMLAttributes, memo } from 'react';
 
-const Button = dynamic(() => import('components/RUA/Button'));
+const Button = dynamic(() => import('components/rua/button'));
 
 type Props = {
   hasPrev: boolean;
@@ -13,7 +13,7 @@ type Props = {
   total?: number;
 } & DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
 
-const RUAPagination = ({
+const RuaPagination = ({
   hasPrev,
   hasNext,
   prevLink,
@@ -59,4 +59,4 @@ const RUAPagination = ({
   );
 };
 
-export default memo(RUAPagination);
+export default memo(RuaPagination);

components/rua/rua-sandpack.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 interface Props extends SandpackProps {}
 
-const RUASandpack = ({ ...rest }: Props) => {
+const RuaSandpack = ({ ...rest }: Props) => {
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme;
 
@@ -20,4 +20,4 @@ const RUASandpack = ({ ...rest }: Props) => {
   );
 };
 
-export default memo(RUASandpack);
+export default memo(RuaSandpack);

components/rua/tab/index.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, { memo, useState } from 'react';
-import { ItemProps } from './TabItem';
+import { ItemProps } from './tab-item';
 
 type Props = {
   defaultValue: string | number;