Skip to content

Commit d2d8e36

Browse files
DariusLukasukasDariusLukasukas
committed
fix
fix to node-yahoo-finance2, layout shift and added next-view-transitions.
1 parent 93860d3 commit d2d8e36

File tree

12 files changed

+317
-270
lines changed

12 files changed

+317
-270
lines changed

‎app/globals.css

+7
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,13 @@
6666
}
6767
}
6868

69+
html {
70+
margin-left: calc(100vw - 100%);
71+
}
72+
body {
73+
@apply !min-w-full;
74+
}
75+
6976
@layer base {
7077
* {
7178
@apply border-border;

‎app/layout.tsx

+18-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Metadata } from "next"
22
import { Inter } from "next/font/google"
33
import "./globals.css"
4+
import { ViewTransitions } from "next-view-transitions"
45
import { ThemeProvider } from "@/components/ui/theme-provider"
56
import Navigation from "@/components/ui/navigation"
67
import Footer from "@/components/ui/footer"
@@ -19,21 +20,23 @@ export default function RootLayout({
1920
children: React.ReactNode
2021
}>) {
2122
return (
22-
<html lang="en" suppressHydrationWarning>
23-
<body
24-
className={`${inter.className} min-h-screen bg-background pb-6 antialiased selection:bg-black selection:text-white dark:selection:bg-white dark:selection:text-black`}
25-
>
26-
<ThemeProvider
27-
attribute="class"
28-
defaultTheme="system"
29-
enableSystem
30-
disableTransitionOnChange
23+
<ViewTransitions>
24+
<html lang="en" suppressHydrationWarning>
25+
<body
26+
className={`${inter.className} min-h-screen bg-background pb-6 antialiased selection:bg-black selection:text-white dark:selection:bg-white dark:selection:text-black`}
3127
>
32-
<Navigation />
33-
{children}
34-
<Footer />
35-
</ThemeProvider>
36-
</body>
37-
</html>
28+
<ThemeProvider
29+
attribute="class"
30+
defaultTheme="system"
31+
enableSystem
32+
disableTransitionOnChange
33+
>
34+
<Navigation />
35+
<main className="container">{children}</main>
36+
<Footer />
37+
</ThemeProvider>
38+
</body>
39+
</html>
40+
</ViewTransitions>
3841
)
3942
}

‎app/page.tsx

+51-57
Original file line numberDiff line numberDiff line change
@@ -136,69 +136,63 @@ export default async function Home({
136136
: "bg-neutral-500/10"
137137

138138
return (
139-
<div className="container">
140-
<div className="flex flex-col gap-4">
141-
<div className="flex flex-col gap-4 lg:flex-row">
142-
<div className="w-full lg:w-1/2">
143-
<Card className="relative flex h-full min-h-[15rem] flex-col justify-between overflow-hidden">
144-
<CardHeader>
145-
<CardTitle className="z-50 w-fit rounded-full px-4 py-2 font-medium dark:bg-neutral-100/5">
146-
The markets are{" "}
147-
<strong className={sentimentColor}>{marketSentiment}</strong>
148-
</CardTitle>
149-
</CardHeader>
150-
{news.news[0] && news.news[0].title && (
151-
<CardFooter className="flex-col items-start">
152-
<p className="mb-2 text-sm font-semibold text-neutral-500 dark:text-neutral-500">
153-
What you need to know today
154-
</p>
155-
<Link
156-
prefetch={false}
157-
href={news.news[0].link}
158-
className="text-lg font-extrabold"
159-
>
160-
{news.news[0].title}
161-
</Link>
162-
</CardFooter>
163-
)}
164-
<div
165-
className={`pointer-events-none absolute inset-0 z-0 h-[65%] w-[65%] -translate-x-[10%] -translate-y-[30%] rounded-full blur-3xl ${sentimentBackground}`}
166-
/>
167-
</Card>
168-
</div>
169-
<div className="w-full lg:w-1/2">
170-
<Card>
171-
<CardHeader>
172-
<CardTitle className="text-lg">Sector Performance</CardTitle>
173-
</CardHeader>
174-
<CardContent>
175-
<Suspense fallback={<div>Loading...</div>}>
176-
<SectorPerformance />
177-
</Suspense>
178-
</CardContent>
179-
</Card>
180-
</div>
139+
<div className="flex flex-col gap-4">
140+
<div className="flex flex-col gap-4 lg:flex-row">
141+
<div className="w-full lg:w-1/2">
142+
<Card className="relative flex h-full min-h-[15rem] flex-col justify-between overflow-hidden">
143+
<CardHeader>
144+
<CardTitle className="z-50 w-fit rounded-full px-4 py-2 font-medium dark:bg-neutral-100/5">
145+
The markets are{" "}
146+
<strong className={sentimentColor}>{marketSentiment}</strong>
147+
</CardTitle>
148+
</CardHeader>
149+
{news.news[0] && news.news[0].title && (
150+
<CardFooter className="flex-col items-start">
151+
<p className="mb-2 text-sm font-semibold text-neutral-500 dark:text-neutral-500">
152+
What you need to know today
153+
</p>
154+
<Link
155+
prefetch={false}
156+
href={news.news[0].link}
157+
className="text-lg font-extrabold"
158+
>
159+
{news.news[0].title}
160+
</Link>
161+
</CardFooter>
162+
)}
163+
<div
164+
className={`pointer-events-none absolute inset-0 z-0 h-[65%] w-[65%] -translate-x-[10%] -translate-y-[30%] rounded-full blur-3xl ${sentimentBackground}`}
165+
/>
166+
</Card>
181167
</div>
182-
<div>
183-
<h2 className="py-4 text-xl font-medium">Markets</h2>
184-
<Card className="flex flex-col gap-4 p-6 lg:flex-row">
185-
<div className="w-full lg:w-1/2">
186-
<Suspense fallback={<div>Loading...</div>}>
187-
<DataTable columns={columns} data={resultsWithTitles} />
188-
</Suspense>
189-
</div>
190-
<div className="w-full lg:w-1/2">
168+
<div className="w-full lg:w-1/2">
169+
<Card>
170+
<CardHeader>
171+
<CardTitle className="text-lg">Sector Performance</CardTitle>
172+
</CardHeader>
173+
<CardContent>
191174
<Suspense fallback={<div>Loading...</div>}>
192-
<MarketsChart
193-
ticker={ticker}
194-
range={range}
195-
interval={interval}
196-
/>
175+
<SectorPerformance />
197176
</Suspense>
198-
</div>
177+
</CardContent>
199178
</Card>
200179
</div>
201180
</div>
181+
<div>
182+
<h2 className="py-4 text-xl font-medium">Markets</h2>
183+
<Card className="flex flex-col gap-4 p-6 lg:flex-row">
184+
<div className="w-full lg:w-1/2">
185+
<Suspense fallback={<div>Loading...</div>}>
186+
<DataTable columns={columns} data={resultsWithTitles} />
187+
</Suspense>
188+
</div>
189+
<div className="w-full lg:w-1/2">
190+
<Suspense fallback={<div>Loading...</div>}>
191+
<MarketsChart ticker={ticker} range={range} interval={interval} />
192+
</Suspense>
193+
</div>
194+
</Card>
195+
</div>
202196
</div>
203197
)
204198
}

‎app/screener/components/data-table.tsx

+58-55
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { useCallback, useState } from "react"
3333
import { Button } from "@/components/ui/button"
3434
import { Input } from "@/components/ui/input"
3535
import { DataTableViewOptions } from "./column-toggle"
36+
import { Card, CardContent } from "@/components/ui/card"
3637

3738
interface DataTableProps<TData, TValue> {
3839
columns: ColumnDef<TData, TValue>[]
@@ -90,7 +91,7 @@ export function DataTable<TData, TValue>({
9091

9192
return (
9293
<div className="w-full">
93-
<div className="flex items-center">
94+
<div className="flex items-center pb-4">
9495
<Select onValueChange={(value) => handleSelect(value)}>
9596
<SelectTrigger className="w-[180px] bg-card">
9697
<SelectValue placeholder="Most actives" />
@@ -103,7 +104,7 @@ export function DataTable<TData, TValue>({
103104
))}
104105
</SelectContent>
105106
</Select>
106-
<div className="ml-2 flex items-center py-4">
107+
<div className="ml-2 flex items-center">
107108
<Input
108109
placeholder="Filter company..."
109110
value={
@@ -112,64 +113,66 @@ export function DataTable<TData, TValue>({
112113
onChange={(event) =>
113114
table.getColumn("shortName")?.setFilterValue(event.target.value)
114115
}
115-
className="max-w-sm caret-blue-500"
116+
className="max-w-sm bg-background caret-blue-500"
116117
/>
117118
</div>
118119
<DataTableViewOptions table={table} />
119120
</div>
120-
<div className="rounded-md border">
121-
<Table>
122-
<TableHeader>
123-
{table.getHeaderGroups().map((headerGroup) => (
124-
<TableRow key={headerGroup.id}>
125-
{headerGroup.headers.map((header) => {
126-
return (
127-
<TableHead key={header.id}>
128-
{header.isPlaceholder
129-
? null
130-
: flexRender(
131-
header.column.columnDef.header,
132-
header.getContext()
133-
)}
134-
</TableHead>
135-
)
136-
})}
137-
</TableRow>
138-
))}
139-
</TableHeader>
140-
<TableBody>
141-
{table.getRowModel().rows?.length ? (
142-
table.getRowModel().rows.map((row) => (
143-
<TableRow
144-
key={row.id}
145-
data-state={row.getIsSelected() && "selected"}
146-
>
147-
{row.getVisibleCells().map((cell) => (
148-
<TableCell
149-
key={cell.id}
150-
className="min-w-20 max-w-40 truncate"
151-
>
152-
{flexRender(
153-
cell.column.columnDef.cell,
154-
cell.getContext()
155-
)}
156-
</TableCell>
157-
))}
121+
<Card>
122+
<CardContent className="pt-6">
123+
<Table>
124+
<TableHeader>
125+
{table.getHeaderGroups().map((headerGroup) => (
126+
<TableRow key={headerGroup.id}>
127+
{headerGroup.headers.map((header) => {
128+
return (
129+
<TableHead key={header.id}>
130+
{header.isPlaceholder
131+
? null
132+
: flexRender(
133+
header.column.columnDef.header,
134+
header.getContext()
135+
)}
136+
</TableHead>
137+
)
138+
})}
158139
</TableRow>
159-
))
160-
) : (
161-
<TableRow>
162-
<TableCell
163-
colSpan={columns.length}
164-
className="h-24 text-center"
165-
>
166-
No results.
167-
</TableCell>
168-
</TableRow>
169-
)}
170-
</TableBody>
171-
</Table>
172-
</div>
140+
))}
141+
</TableHeader>
142+
<TableBody>
143+
{table.getRowModel().rows?.length ? (
144+
table.getRowModel().rows.map((row) => (
145+
<TableRow
146+
key={row.id}
147+
data-state={row.getIsSelected() && "selected"}
148+
>
149+
{row.getVisibleCells().map((cell) => (
150+
<TableCell
151+
key={cell.id}
152+
className="min-w-20 max-w-40 truncate"
153+
>
154+
{flexRender(
155+
cell.column.columnDef.cell,
156+
cell.getContext()
157+
)}
158+
</TableCell>
159+
))}
160+
</TableRow>
161+
))
162+
) : (
163+
<TableRow>
164+
<TableCell
165+
colSpan={columns.length}
166+
className="h-24 text-center"
167+
>
168+
No results.
169+
</TableCell>
170+
</TableRow>
171+
)}
172+
</TableBody>
173+
</Table>
174+
</CardContent>
175+
</Card>
173176
<div className="flex items-center justify-end space-x-2 py-4">
174177
<div className="flex items-center space-x-2">
175178
<p className="text-sm font-medium">Rows per page</p>

‎app/screener/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default async function ScreenerPage({
2020
const screenerDataResults = await fetchScreenerStocks(screener)
2121

2222
return (
23-
<div className="container">
23+
<div>
2424
<DataTable columns={columns} data={screenerDataResults.quotes} />
2525
</div>
2626
)

‎app/stocks/[ticker]/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export default async function StocksPage({ params, searchParams }: Props) {
5252
)
5353

5454
return (
55-
<div className="container">
55+
<div>
5656
<Card>
5757
<CardContent className="space-y-10 pt-6 lg:px-40 lg:py-14">
5858
<Suspense

‎components/stocks/markets/columns.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ export const columns: ColumnDef<Quote>[] = [
1717
return (
1818
<Link
1919
prefetch={false}
20-
href={`?ticker=${symbol}`}
20+
href={{
21+
pathname: "/",
22+
query: { ticker: symbol },
23+
}}
2124
className="font-medium"
2225
>
2326
{title}

‎components/ui/command-menu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default function CommandMenu() {
5959
<Command>
6060
<CommandDialog open={open} onOpenChange={setOpen}>
6161
<CommandInput
62-
placeholder="Search for symbols or companies..."
62+
placeholder="Search by symbols or companies..."
6363
value={search}
6464
onValueChange={setSearch}
6565
/>

0 commit comments

Comments
 (0)