Skip to content

Commit 6026207

Browse files
switzswitz
committed
Upgrade to tailwind v4 and move to lucide react; remove fontawesome
1 parent 10e66d8 commit 6026207

File tree

13 files changed

+439
-386
lines changed

13 files changed

+439
-386
lines changed

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"isomorphic-fetch": "3.0.0",
2828
"ky": "^1.2.4",
2929
"ky-universal": "^0.12.0",
30+
"lucide-react": "^0.485.0",
3031
"next": "15.2.4",
3132
"next-redux-wrapper": "8.1.0",
3233
"nextjs-toploader": "^3.7.15",
@@ -42,20 +43,20 @@
4243
},
4344
"devDependencies": {
4445
"@switz/eslint-config": "^11.0.0",
46+
"@tailwindcss/postcss": "^4.0.17",
4547
"@types/node": "^20.12.10",
4648
"@types/react": "19.0.12",
4749
"@types/ua-parser-js": "^0.7.39",
4850
"@typescript-eslint/eslint-plugin": "^8.27.0",
49-
"autoprefixer": "^10.4.19",
5051
"eslint": "^8.55.0",
5152
"eslint-config-prettier": "^9.1.0",
5253
"eslint-plugin-prettier": "^5.1.3",
5354
"eslint-plugin-react": "^7.37.4",
5455
"eslint_d": "^13.1.1",
5556
"postcss": "^8.4.38",
5657
"prettier": "^3.2.5",
57-
"prettier-plugin-tailwindcss": "^0.5.14",
58-
"tailwindcss": "^3.4.3",
58+
"prettier-plugin-tailwindcss": "^0.6.11",
59+
"tailwindcss": "^4.0.17",
5960
"typescript": "^5.4.5"
6061
},
6162
"pnpm": {

‎pnpm-lock.yaml‎

Lines changed: 352 additions & 328 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎postcss.config.cjs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
module.exports = {
22
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
54
},
65
};

‎src/app/(main)/(secondary)/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { PropsWithChildren } from 'react';
22

33
export default function Layout({ children }: PropsWithChildren) {
4-
return <div className="mx-auto max-w-screen-md py-8">{children}</div>;
4+
return <div className="mx-auto max-w-(--breakpoint-md) py-8">{children}</div>;
55
}

‎src/app/(main)/(secondary)/today/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default async function Page() {
1515
const groupedBy: Day[][] = groupBy(artists, 'artistName');
1616

1717
return (
18-
<div className="mx-auto w-full max-w-screen-md flex-1">
18+
<div className="mx-auto w-full max-w-(--breakpoint-md) flex-1">
1919
<h1 className="my-4 text-4xl font-semibold">Today in History</h1>
2020
{Object.entries(groupedBy).map(([artistName, days]) => (
2121
<div key={artistName}>

‎src/app/(main)/(tertiary)/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { PropsWithChildren } from 'react';
22

33
export default function Layout({ children }: PropsWithChildren) {
4-
return <div className="mx-auto w-full max-w-screen-xl py-8">{children}</div>;
4+
return <div className="mx-auto w-full max-w-(--breakpoint-xl) py-8">{children}</div>;
55
}

‎src/app/(main)/NavBar.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { fetchArtists } from '../queries';
77
import MainNavHeader from './MainNavHeader';
88
import { getUserAgent } from './layout';
99
import AndroidUpgradeNotification from './AndroidUpgradeNotification';
10+
import { MenuIcon } from 'lucide-react';
1011

1112
export default async function NavBar() {
1213
const artists = await fetchArtists();
@@ -32,11 +33,11 @@ export default async function NavBar() {
3233
<SimplePopover content={<Menu />}>
3334
<Flex className="flex-2 h-full cursor-pointer content-end items-center text-center font-medium 2xl:hidden">
3435
<div className="ml-auto flex h-full items-center px-1 active:relative active:top-[1px] active:text-[#333333]">
35-
<i className="fa fa-bars text-inherit" />
36+
<MenuIcon />
3637
</div>
3738
</Flex>
3839
</SimplePopover>
39-
<div className="nav hidden h-full flex-[2] cursor-pointer items-center justify-end text-center font-medium 2xl:flex">
40+
<div className="nav flex-2 hidden h-full cursor-pointer items-center justify-end text-center font-medium 2xl:flex">
4041
<div className="h-full px-1">
4142
<Link href="/today" legacyBehavior prefetch={false}>
4243
<a className="nav-btn">TIH</a>

‎src/components/LiveTrack.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { motion } from 'framer-motion';
66
import { splitShowDate } from '../lib/utils';
77
import { TrackSource, Track, Venue } from '../types';
88
import Flex from './Flex';
9+
import { ArrowRight } from 'lucide-react';
910

1011
const createURL = (track: { track: Track; source: TrackSource }): string => {
1112
const { year, month, day } = splitShowDate(track.source.display_date);
@@ -90,7 +91,7 @@ export default function LiveTrack({
9091
}}
9192
initial={{ opacity: 1, height: 0, borderColor: 'rgba(0,255,50,0.1)' }}
9293
animate={{ opacity: 1, height: '100%', borderColor: 'rgba(0,0,0, 0.3)' }}
93-
className={`relative flex flex-1 cursor-pointer overflow-hidden rounded border-[1px] px-4 py-2 transition-opacity duration-1000 ease-in-out hover:bg-slate-200/20 ${isLastSeen && 'border-b-green-600'}`}
94+
className={`relative flex flex-1 cursor-pointer overflow-hidden rounded-sm border-[1px] px-4 py-2 transition-opacity duration-1000 ease-in-out hover:bg-slate-200/20 ${isLastSeen && 'border-b-green-600'}`}
9495
data-is-last-seen={isLastSeen}
9596
layout
9697
>
@@ -110,7 +111,10 @@ export default function LiveTrack({
110111
created_at={created_at}
111112
/>
112113
</div>
113-
<i className="fa fa-arrow-right absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-sm text-gray-500 hover:text-gray-900" />
114+
<ArrowRight
115+
className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-gray-500 hover:text-gray-900"
116+
size={16}
117+
/>
114118
</Flex>
115119
</motion.div>
116120
</Link>

‎src/components/Player.tsx‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@ import { useSelector } from 'react-redux';
88
import player from '../lib/player';
99
import { durationToHHMMSS, removeLeadingZero, splitShowDate } from '../lib/utils';
1010
import Flex from './Flex';
11+
import {
12+
ChevronDown,
13+
FastForwardIcon,
14+
ListMusicIcon,
15+
PauseIcon,
16+
PlayIcon,
17+
RewindIcon,
18+
} from 'lucide-react';
1119

1220
interface Props {
1321
artistSlugsToName: Record<string, string | undefined>;
@@ -77,24 +85,25 @@ const Player = ({ artistSlugsToName }: Props) => {
7785
)}
7886
{activeTrack && (
7987
<Flex
80-
className="playpause cursor-pointer items-center justify-center text-gray-600 active:text-gray-800 lg:w-[50px]"
88+
className="playpause cursor-pointer items-center justify-center text-gray-600 active:text-gray-800 lg:w-[40px]"
8189
onClick={() => player.togglePlayPause()}
8290
>
83-
<i
84-
className={`fas fa cursor-pointer fa-${
85-
playback.activeTrack.isPaused ? 'play' : 'pause'
86-
}`}
87-
/>
91+
{playback.activeTrack.isPaused ? (
92+
<PlayIcon size={20} className="fill-gray-600 active:fill-gray-800" />
93+
) : (
94+
<PauseIcon size={20} className="fill-gray-600 active:fill-gray-800" />
95+
)}
8896
</Flex>
8997
)}
9098
{typeof window === 'undefined' || !activeTrack ? null : (
9199
<div className="relative h-full flex-1" ref={playerRef}>
92100
<Flex className="info h-full justify-center transition-all duration-[1s] ease-in-out">
93101
<div className="timing absolute left-[8px] top-1/2 translate-x-0 translate-y-[-50%] text-left text-[0.8em] text-gray-600">
94102
<div>
95-
<i
96-
className="fa fa-backward cursor-pointer"
103+
<RewindIcon
104+
className="cursor-pointer fill-gray-600"
97105
onClick={() => player.playPrevious()}
106+
size={16}
98107
/>
99108
</div>
100109
<div>{durationToHHMMSS(playback.activeTrack.currentTime)}</div>
@@ -105,7 +114,7 @@ const Player = ({ artistSlugsToName }: Props) => {
105114
{false && (
106115
<Flex className="absolute left-full top-[2px] ml-2 w-full items-center text-[0.8em] text-gray-600">
107116
<div>Next: {nextTrack && nextTrack.title}&nbsp;</div>
108-
<i className="fa fa-angle-down cursor-pointer" />
117+
<ChevronDown size={12} className="cursor-pointer" />
109118
</Flex>
110119
)}
111120
</div>
@@ -122,7 +131,11 @@ const Player = ({ artistSlugsToName }: Props) => {
122131
</Flex>
123132
<div className="timing duration absolute right-[8px] top-1/2 translate-x-0 translate-y-[-50%] text-right text-[0.8em] text-gray-600">
124133
<div>
125-
<i className="fa fa-forward cursor-pointer" onClick={() => player.playNext()} />
134+
<FastForwardIcon
135+
className="ml-auto cursor-pointer fill-gray-600"
136+
onClick={() => player.playNext()}
137+
size={16}
138+
/>
126139
</div>
127140
<div onClick={toggleRemainingDuration} className="cursor-pointer">
128141
{durationToHHMMSS(
@@ -134,7 +147,7 @@ const Player = ({ artistSlugsToName }: Props) => {
134147
</div>
135148
</Flex>
136149
<div
137-
className="absolute bottom-0 left-0 z-[1] h-1 w-full cursor-pointer bg-[#bcbcbc]"
150+
className="z-1 absolute bottom-0 left-0 h-1 w-full cursor-pointer bg-[#bcbcbc]"
138151
onClick={onProgressClick}
139152
style={{ opacity: playback.activeTrack.currentTime < 0.1 ? 0.8 : 1 }}
140153
>
@@ -143,12 +156,12 @@ const Player = ({ artistSlugsToName }: Props) => {
143156
style={{ width: notchPosition ? notchPosition + 2 : 'auto' }}
144157
/>
145158
<div
146-
className="absolute bottom-0 left-0 z-[1] h-2 w-[3px] bg-black"
159+
className="z-1 absolute bottom-0 left-0 h-2 w-[3px] bg-black"
147160
style={{ transform: `translate(${notchPosition}px, 0)` }}
148161
/>
149162
</div>
150163
<div
151-
className="absolute right-[-6px] top-0 h-full w-[6px] bg-[#0000001a]"
164+
className="absolute right-[-6px] top-0 h-full w-[6px] cursor-pointer bg-[#0000001a]"
152165
onClick={updateVolume}
153166
>
154167
<div
@@ -166,8 +179,8 @@ const Player = ({ artistSlugsToName }: Props) => {
166179
as={`/${artistSlug}/${year}/${month}/${day}?source=${source}`}
167180
legacyBehavior
168181
>
169-
<div className="w-[50px] cursor-pointer items-center justify-center self-center text-gray-600 active:text-gray-800 max-lg:hidden">
170-
<i className="fa fa fa-list-ol cursor-pointer" />
182+
<div className="flex w-[40px] cursor-pointer items-center justify-center self-center text-gray-600 active:text-gray-800 max-lg:hidden">
183+
<ListMusicIcon size={22} />
171184
</div>
172185
</Link>
173186
)}

‎src/components/Popover.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ export const PopoverContent = React.forwardRef<HTMLDivElement, React.HTMLProps<H
183183
style={{ ...context.floatingStyles, ...style }}
184184
aria-labelledby={context.labelId}
185185
aria-describedby={context.descriptionId}
186-
className="z-10 rounded border border-black/10 bg-white text-center font-medium shadow-lg"
186+
className="z-10 rounded-sm border border-black/10 bg-white text-center font-medium shadow-lg"
187187
{...context.getFloatingProps(props)}
188188
>
189189
{props.children}

0 commit comments

Comments
 (0)