Skip to content

Commit c179afe

Browse files
munlicodemunlicode
committed
feat: add "mono" variant to CalendarIcon and update usage in dashboard
1 parent 76301e7 commit c179afe

3 files changed

Lines changed: 23 additions & 39 deletions

File tree

‎apps/web/app/routes/app/dashboard/views/CalendarView.tsx‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,13 @@ import {
1414
useIsMobile,
1515
} from "@kreozalabs/kei-ui";
1616
import { motion, AnimatePresence } from "framer-motion";
17-
import { ChevronLeftIcon, ChevronRightIcon, ChevronDown, CalendarIcon } from "lucide-react";
17+
import { ChevronLeftIcon, ChevronRightIcon, ChevronDown } from "lucide-react";
1818
import { useSettings } from "@/providers/SettingsContext";
1919
import { useDashboardContext } from "../context/DashboardContext";
2020
import type { ViewMode } from "../types";
2121
import { useActionInputModal } from "@/providers/ActionInputModalContext";
2222
import type { Action } from "@kreozalabs/kei-core";
23+
import { CalendarIcon } from "@kreozalabs/kei-icons";
2324

2425
const VIEW_MODE_UNITS: Record<string, "day" | "week" | "month" | "year"> = {
2526
day: "day",
@@ -97,21 +98,7 @@ function TodayButton({ onClick }: { onClick?: () => void }) {
9798
}}
9899
>
99100
{isMobile ? (
100-
<CalendarIcon className="size-7">
101-
<text
102-
x="50%"
103-
y="68%"
104-
dominantBaseline="middle"
105-
textAnchor="middle"
106-
fontSize="9"
107-
fontWeight="italic"
108-
fill="currentColor"
109-
stroke="none" /* Keeps the number crisp without inheriting the icon's outline stroke */
110-
className="font-sans tracking-tighter"
111-
>
112-
{todayElement}
113-
</text>
114-
</CalendarIcon>
101+
<CalendarIcon className="size-8" day={todayElement} variant="mono" />
115102
) : (
116103
<span>Today</span>
117104
)}

‎packages/icons/icon-config.json‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,8 @@
99
],
1010
"jsxReplacements": [
1111
{
12-
"search": "(export\\s+)?const CalendarIcon = \\(props: SVGProps<SVGSVGElement>\\) =>",
13-
"replace": "export interface CalendarIconProps extends SVGProps<SVGSVGElement> {\n day?: number | string;\n}\nexport const CalendarIcon = ({ day = 31, ...props }: CalendarIconProps) =>",
14-
"isRegex": true
15-
},
16-
{
17-
"search": "{\"__CALENDAR_DAY__\"}",
18-
"replace": "{day}",
19-
"isRegex": false
20-
},
21-
{
22-
"search": "\"__CALENDAR_DAY__\"",
23-
"replace": "{day}",
24-
"isRegex": false
25-
},
26-
{
27-
"search": "<text x={96} y={112} fill=\"#fff\">",
28-
"replace": "<text x={96} y={112} fill=\"#fff\" fontSize={84} fontWeight={800} fontFamily=\"system-ui, -apple-system, sans-serif\" textAnchor=\"middle\" dominantBaseline=\"middle\">",
29-
"isRegex": false
30-
},
31-
{
32-
"search": "export default CalendarIcon;?",
33-
"replace": "",
12+
"search": "const CalendarIcon = [\\s\\S]+",
13+
"replace": "export interface CalendarIconProps extends SVGProps<SVGSVGElement> {\n day?: number | string;\n variant?: \"color\" | \"mono\";\n}\nexport const CalendarIcon = ({ day = 31, variant = \"color\", ...props }: CalendarIconProps) => {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 192 192\" {...props}>\n {variant === \"mono\" ? (\n <>\n <path stroke=\"currentColor\" strokeWidth={16} fill=\"none\" d=\"M19.867 49.392C17.818 33.82 29.94 20 45.645 20h100.71c15.706 0 27.827 13.82 25.778 29.392L166 96l6.133 46.608C174.182 158.18 162.061 172 146.355 172H45.645c-15.706 0-27.827-13.82-25.778-29.392L26 96z\" />\n <text x={96} y={112} fill=\"currentColor\" fontSize={80} fontWeight={800} fontFamily=\"system-ui, -apple-system, sans-serif\" textAnchor=\"middle\" dominantBaseline=\"middle\">{day}</text>\n </>\n ) : (\n <>\n <path fill=\"#ff693c\" d=\"M19.867 49.392C17.818 33.82 29.94 20 45.645 20h100.71c15.706 0 27.827 13.82 25.778 29.392L166 96l6.133 46.608C174.182 158.18 162.061 172 146.355 172H45.645c-15.706 0-27.827-13.82-25.778-29.392L26 96z\" />\n <text x={96} y={112} fill=\"#fff\" fontSize={84} fontWeight={800} fontFamily=\"system-ui, -apple-system, sans-serif\" textAnchor=\"middle\" dominantBaseline=\"middle\">{day}</text>\n </> \n )}\n </svg>\n );\n};",
3414
"isRegex": true
3515
}
3616
]

‎packages/icons/src/components/CalendarIcon.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,22 @@ import * as React from "react";
22
import type { SVGProps } from "react";
33
export interface CalendarIconProps extends SVGProps<SVGSVGElement> {
44
day?: number | string;
5+
variant?: "color" | "mono";
56
}
6-
export const CalendarIcon = ({ day = 31, ...props }: CalendarIconProps) => <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 192 192" {...props}><path fill="#ff693c" d="M19.867 49.392C17.818 33.82 29.94 20 45.645 20h100.71c15.706 0 27.827 13.82 25.778 29.392L166 96l6.133 46.608C174.182 158.18 162.061 172 146.355 172H45.645c-15.706 0-27.827-13.82-25.778-29.392L26 96z" /><text x={96} y={112} fill="#fff" fontSize={84} fontWeight={800} fontFamily="system-ui, -apple-system, sans-serif" textAnchor="middle" dominantBaseline="middle">{day}</text></svg>;
7+
export const CalendarIcon = ({ day = 31, variant = "color", ...props }: CalendarIconProps) => {
8+
return (
9+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 192 192" {...props}>
10+
{variant === "mono" ? (
11+
<>
12+
<path stroke="currentColor" strokeWidth={16} fill="none" d="M19.867 49.392C17.818 33.82 29.94 20 45.645 20h100.71c15.706 0 27.827 13.82 25.778 29.392L166 96l6.133 46.608C174.182 158.18 162.061 172 146.355 172H45.645c-15.706 0-27.827-13.82-25.778-29.392L26 96z" />
13+
<text x={96} y={112} fill="currentColor" fontSize={80} fontWeight={800} fontFamily="system-ui, -apple-system, sans-serif" textAnchor="middle" dominantBaseline="middle">{day}</text>
14+
</>
15+
) : (
16+
<>
17+
<path fill="#ff693c" d="M19.867 49.392C17.818 33.82 29.94 20 45.645 20h100.71c15.706 0 27.827 13.82 25.778 29.392L166 96l6.133 46.608C174.182 158.18 162.061 172 146.355 172H45.645c-15.706 0-27.827-13.82-25.778-29.392L26 96z" />
18+
<text x={96} y={112} fill="#fff" fontSize={84} fontWeight={800} fontFamily="system-ui, -apple-system, sans-serif" textAnchor="middle" dominantBaseline="middle">{day}</text>
19+
</>
20+
)}
21+
</svg>
22+
);
23+
};

0 commit comments

Comments
 (0)