prepare v1.0.1

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [v1.0.1] - 12 January 2024
+
 ### What's New?
 
 -   Right Hand Cursor Mode added
@@ -70,7 +72,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   Initial public release 🎊
 
-[unreleased]: https://github.com/ful1e5/bibata/compare/v1.0.0...main
+[unreleased]: https://github.com/ful1e5/bibata/compare/v1.0.1...main
+[v1.0.1]: https://github.com/ful1e5/bibata/compare/v1.0.1...v1.0.0
 [v1.0.0]: https://github.com/ful1e5/bibata/compare/v1.0.0...v1.0.0-beta.0
 [v1.0.0-beta.0]: https://github.com/ful1e5/bibata/compare/v1.0.0-alpha.1...v1.0.0-beta.0
 [v1.0.0-alpha.1]: https://github.com/ful1e5/bibata/compare/v1.0.0-alpha.0...v1.0.0-alpha.1

src/app/(home)/page.tsx

@@ -5,7 +5,7 @@ import '@app/(home)/styles.css';
 import Link from 'next/link';
 
 import { Message } from '@components/Message';
-import { AnimatedCounter } from '@components/AnimatedCount';
+import { AnimatedCounter as Counter } from '@components/AnimatedCount';
 import { BibataMarquee } from '@components/BibataMarquee';
 import { Heroes } from '@components/Heroes';
 import {
@@ -141,7 +141,7 @@ export default function HomePage() {
                   <path d='M24 12c0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12 12-5.373 12-12zm-18 1h4v-7h4v7h4l-6 6-6-6z' />
                 </svg>
                 <h4>
-                  <AnimatedCounter number='121' duration={2} />
+                  <Counter number='327' duration={5} />
                   K+
                 </h4>
               </div>

src/components/DownloadButton/counts.tsx

@@ -17,6 +17,10 @@ type Props = {
   show: boolean;
 };
 
+const numberWithCommas = (x: number) => {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+
 export const DownloadCount: React.FC<Props> = (props) => {
   const fetcher = () => {
     try {
@@ -62,8 +66,9 @@ export const DownloadCount: React.FC<Props> = (props) => {
           <p
             className={`${
               noDownloads ? 'text-red-100/[.8]' : 'text-green-100/[.8]'
-            } font-extrabold text-center text-md p-1`}>
-            {`${data.count}`}/{pro ? <> &#8734;</> : data.total}
+            } font-extrabold text-center text-sm p-1`}>
+            {`${numberWithCommas(data.count)}`}/
+            {pro ? <> &#8734;</> : numberWithCommas(data.total!)}
           </p>
           {!pro && (
             <Tooltip

src/components/Message.tsx

@@ -15,9 +15,9 @@ export const Message: React.FC<Props> = (props) => {
     <div className='text-center py-4 lg:px-4'>
       <Link href={props.href}>
         <div
-          className='transition hover:scale-105 active:scale-95 p-2 bg-indigo-800 items-center text-indigo-100 leading-none rounded-full flex sm:inline-flex'
+          className='transition hover:scale-105 active:scale-95 p-2 bg-red-800 items-center text-red-100 leading-none rounded-full flex sm:inline-flex'
           role='alert'>
-          <span className='flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3'>
+          <span className='flex rounded-full bg-red-500 uppercase px-2 py-1 text-xs font-bold mr-3'>
             {props.tag}
           </span>
           <span className='font-semibold text-xs mr-2 text-left flex-auto'>