update age bar style

src/components/Home/AgeBar.tsx

@@ -13,33 +13,48 @@ const elapsedYourMonth = (ymd: string) => {
 	}
 }
 
-type Props = {
-	ymd: string // yyyy-mm-dd
-}
+const divmod = (a: number, b: number) => [Math.floor(a / b), a % b]
 
-export const AgeBar = ({ ymd }: Props) => {
-	const { showAgebar: visible } = useSettings()
-	const { y, m } = elapsedYourMonth(ymd)
+export const AgeBar = ({ y, m }: { y: number; m: number }) => {
+	const [oy, my] = divmod(y, 10)
 
 	return (
-		<Style
-			className="co-agebar co-panel"
-			onClick={(e) => e.stopPropagation()}
-			style={{ display: visible ? 'block' : 'none' }}
-		>
+		<Style className="co-agebar co-panel" onClick={(e) => e.stopPropagation()}>
 			<p>
 				{y}
 				<span>年</span>
 				{m}
 				<span>ヶ月前</span>
-				{range(y).map((i) => (
+				{range(oy).map((i) => (
+					<progress className="ten" key={i} value={12} max={12} />
+				))}
+				{range(my).map((i) => (
 					<progress key={i} value={12} max={12} />
 				))}
 				<progress value={m} max={12} />
 			</p>
 		</Style>
 	)
 }
+
+const validFormat = (s: string) => s.match(/^\d{4}-\d{2}-\d{2}$/)
+
+type Props = {
+	ymd: string // yyyy-mm-dd
+}
+
+export const AgeBarContainer = ({ ymd }: Props) => {
+	const { showAgebar: visible } = useSettings()
+	const { y, m } = elapsedYourMonth(ymd)
+	if (!validFormat(ymd)) return null
+
+	return (
+		<Style style={{ display: visible ? 'block' : 'none' }}>
+			<AgeBar y={y} m={m} />
+		</Style>
+	)
+}
+
 const Style = styled.div`
 	p {
 		font-size: 0.8rem !important;
@@ -51,17 +66,22 @@ const Style = styled.div`
 		appearance: none;
 		margin-left: 0.2rem;
 		/* filter: invert(1); */
-		border-radius: 5px;
 
 		height: 0.4rem;
 		width: 1rem;
 
+		&.ten {
+			height: 0.5rem;
+			width: 7rem;
+		}
+
 		&::-webkit-progress-bar {
-			background-color: var(--font-color);
-			border-radius: 5px;
+			background-color: var(--font-color, #aaa);
+			border-radius: 4px;
 		}
 		&::-webkit-progress-value {
-			background-color: var(--co-bg);
+			background-color: var(--co-bg, #444);
+			border-radius: 4px;
 		}
 	}
 `

src/components/Home/index.tsx

@@ -25,7 +25,7 @@ import { Conways } from './ex/Coway'
 import { ExtraComp } from './ex/ExtraComp'
 import { YearTimer } from './ex/YearTimer'
 import { shapeStyles, themeStyles } from './themeStyles'
-import { AgeBar } from './AgeBar'
+import { AgeBarContainer } from './AgeBar'
 
 const sideMap: Record<Setting['sideMode'], 'right' | 'center' | 'left' | ''> = {
 	wide: 'center',
@@ -111,7 +111,7 @@ function Home() {
 				{/* {showEmol && <LyricsBox />} */}
 
 				<BookmarkMiniList books={books} toggleFavorites={toggleFavorites} />
-				{isSongFull(song) && song.date && <AgeBar ymd={song.date} />}
+				{isSongFull(song) && song.date && <AgeBarContainer ymd={song.date} />}
 			</Container>
 			<SettingBox
 				favorited={!!books[song.icy]}

src/stories/AgeBar.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { AgeBar } from '../components/Home/AgeBar'
+
+export default {
+	title: 'AgeBar',
+	component: AgeBar,
+	decorators: [
+		(s) => (
+			<div
+				style={{
+					width: '400px',
+				}}
+			>
+				{s()}
+			</div>
+		),
+	],
+} as Meta<typeof AgeBar>
+
+type Story = StoryObj<typeof AgeBar>
+
+export const Recent: Story = { args: { y: 0, m: 4 } }
+export const Ago10: Story = { args: { y: 11, m: 4 } }
+export const Ago20: Story = { args: { y: 24, m: 4 } }

src/stories/seed.ts

@@ -15,6 +15,7 @@ export const seedSong: Song = {
 	icy: '宇佐美奈々子(CV.伊藤美来)・小日向縁(CV.三澤紗千香) - 流川ガールズソング ',
 	singer: '宇佐美奈々子(伊藤美来)/小日向縁(三澤紗千香)',
 	time: +new Date(),
+	date: '2010-01-01',
 	trackTimeMillis: 500000,
 	wordCounts: { 三澤紗千香: 4, 伊藤美来: 23, 宇佐美奈々子: 4, 小日向縁: 4 },
 	wordCountsAna: [