Resume
/
subman-nextjs
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style layout

This commit is contained in:
andrzej 2024-06-20 23:21:37 +02:00
parent 5aaa45cade
commit e1391bec62
8 changed files with 138 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/layout.tsx
View File

@ -30,16 +30,20 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<div id="layout-container" className="flex p-4"> <div id="layout-container" className="p-4 w-screen mt-6 flex justify-center">
<div id="sidebar" > <div className="grid grid-cols-6 w-5/6">
<header className="mb-6"> <div id="sidebar" className="col-start-1 col-end-2">
<h1 className="font-black text-6xl antialiased inline">SubMan</h1> <Send className="inline mb-6" size={"3rem"} /> <header className="">
<p className="font-bold text-xl antialiased">The self-hosted literary<br /> submission tracker.</p> <h1 className="font-black text-4xl antialiased inline">SubMan</h1>
<p className="font-bold text-m antialiased">The self-hosted literary submission tracker.</p>
</header> </header>
<Navlinks /> <Navlinks />
</div> </div>
<div className="col-start-2 col-span-full">
{children} {children}
</div> </div>
</div>
</div>
<Toaster /> <Toaster />
</body> </body>
</html > </html >

25
src/app/loading.tsx Normal file
View File

@ -0,0 +1,25 @@
import { cn } from "@/lib/utils"
import { ComponentProps } from "react"
export const LoadingSpinner = ({ className }: ComponentProps<"svg">) => {
return <svg
xmlns="http://www.w3.org/2000/svg"
width="100"
height="100"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("animate-spin", className)}
>
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
}
export default function Loading() {
return (
<><div className="size-full flex justify-center items-center z">
<LoadingSpinner />
</div></>
)
}

8
src/app/publication/columns.tsx
View File

@ -37,10 +37,12 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
}, },
}, },
{ {
accessorKey: "link", accessorKey: "link",
header: "Link", header: "Link",
}, },
columnHelper.accessor("genres", { columnHelper.accessor("genres", {
cell: props => { cell: props => {
const genres = props.getValue() const genres = props.getValue()
@ -50,6 +52,12 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
filterFn: "arrIncludes" filterFn: "arrIncludes"
//TODO - write custom filter function, to account for an array of objects //TODO - write custom filter function, to account for an array of objects
}), }),
{
accessorKey: "query_after_days",
header: "Query After (days)"
},
{ {
id: "actions", id: "actions",
// header: "Actions", // header: "Actions",

2
src/app/publication/page.tsx
View File

@ -8,7 +8,7 @@ export type PubsWithGenres = Pub & { genres: Array<Genre> }
export default async function Page() { export default async function Page() {
const pubs = await getPubsWithGenres() const pubs = await getPubsWithGenres()
return ( return (
<div className="container mx-auto py-10"> <div className="container mx-auto">
<DataTable data={pubs} columns={columns} /> <DataTable data={pubs} columns={columns} />
</div> </div>

2
src/app/story/page.tsx
View File

@ -9,7 +9,7 @@ export type StoryWithGenres = Story & { genres: Array<Genre> }
export default async function Page() { export default async function Page() {
const stories: Array<StoryWithGenres> = await getStoriesWithGenres() const stories: Array<StoryWithGenres> = await getStoriesWithGenres()
return ( return (
<div className="container mx-auto py-10"> <div className="container mx-auto">
<DataTable columns={columns} data={stories} /> <DataTable columns={columns} data={stories} />
</div> </div>
) )

2
src/app/submission/page.tsx
View File

@ -11,7 +11,7 @@ export type SubComplete = Sub & {
export default async function Page() { export default async function Page() {
const subs: Array<SubComplete> = await getSubsComplete() const subs: Array<SubComplete> = await getSubsComplete()
return ( return (
<div className="container mx-auto py-10"> <div className="container">
<DataTable data={subs} columns={columns} /> <DataTable data={subs} columns={columns} />
</div> </div>
) )

94
src/app/tailwind.css
View File

@ -684,6 +684,26 @@ body {
z-index: 100; z-index: 100;
} }
.col-span-full {
grid-column: 1 / -1;
}
.col-start-1 {
grid-column-start: 1;
}
.col-start-2 {
grid-column-start: 2;
}
.col-end-2 {
grid-column-end: 2;
}
.col-end-3 {
grid-column-end: 3;
}
.-mx-1 { .-mx-1 {
margin-left: -0.25rem; margin-left: -0.25rem;
margin-right: -0.25rem; margin-right: -0.25rem;
@ -737,6 +757,14 @@ body {
margin-top: 1rem; margin-top: 1rem;
} }
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.inline { .inline {
display: inline; display: inline;
} }
@ -761,6 +789,11 @@ body {
display: grid; display: grid;
} }
.size-full {
width: 100%;
height: 100%;
}
.h-10 { .h-10 {
height: 2.5rem; height: 2.5rem;
} }
@ -878,6 +911,18 @@ body {
width: 100%; width: 100%;
} }
.w-screen {
width: 100vw;
}
.w-3\/5 {
width: 60%;
}
.w-5\/6 {
width: 83.333333%;
}
.min-w-\[8rem\] { .min-w-\[8rem\] {
min-width: 8rem; min-width: 8rem;
} }
@ -929,6 +974,16 @@ body {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
.cursor-default { .cursor-default {
cursor: default; cursor: default;
} }
@ -939,6 +994,22 @@ body {
user-select: none; user-select: none;
} }
.grid-cols-\[1fr_4fr\] {
grid-template-columns: 1fr 4fr;
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.flex-row { .flex-row {
flex-direction: row; flex-direction: row;
} }
@ -1053,6 +1124,14 @@ body {
margin-bottom: calc(2rem * var(--tw-space-y-reverse)); margin-bottom: calc(2rem * var(--tw-space-y-reverse));
} }
.place-self-center {
place-self: center;
}
.self-stretch {
align-self: stretch;
}
.justify-self-end { .justify-self-end {
justify-self: end; justify-self: end;
} }
@ -1314,6 +1393,16 @@ body {
line-height: 1rem; line-height: 1rem;
} }
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-black { .font-black {
font-weight: 900; font-weight: 900;
} }
@ -1394,11 +1483,6 @@ body {
color: hsl(var(--secondary-foreground)); color: hsl(var(--secondary-foreground));
} }
.text-slate-50 {
--tw-text-opacity: 1;
color: rgb(248 250 252 / var(--tw-text-opacity));
}
.text-white { .text-white {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));

3
src/app/ui/navLinks.tsx
View File

@ -20,14 +20,13 @@ export default function Navlinks(props: ComponentProps<"div">) {
return ( return (
<> <>
{links.map(e => (<NavLink key={e.link} href={e.link} {links.map(e => (<NavLink key={e.link} href={e.link}
className={clsx("text-4xl font-black my-2", className={clsx("text-2xl font-black my-2",
{ {
"text-destructive": pathname === e.link "text-destructive": pathname === e.link
} }
)} )}
>{e.label}</NavLink >)) >{e.label}</NavLink >))
} }
{pathname}
</> </>
) )
} }