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

20
src/app/layout.tsx
View File

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

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",
header: "Link",
},
columnHelper.accessor("genres", {
cell: props => {
const genres = props.getValue()
@ -50,6 +52,12 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
filterFn: "arrIncludes"
//TODO - write custom filter function, to account for an array of objects
}),
{
accessorKey: "query_after_days",
header: "Query After (days)"
},
{
id: "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() {
const pubs = await getPubsWithGenres()
return (
<div className="container mx-auto py-10">
<div className="container mx-auto">
<DataTable data={pubs} columns={columns} />
</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() {
const stories: Array<StoryWithGenres> = await getStoriesWithGenres()
return (
<div className="container mx-auto py-10">
<div className="container mx-auto">
<DataTable columns={columns} data={stories} />
</div>
)

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

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

94
src/app/tailwind.css
View File

@ -684,6 +684,26 @@ body {
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 {
margin-left: -0.25rem;
margin-right: -0.25rem;
@ -737,6 +757,14 @@ body {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.inline {
display: inline;
}
@ -761,6 +789,11 @@ body {
display: grid;
}
.size-full {
width: 100%;
height: 100%;
}
.h-10 {
height: 2.5rem;
}
@ -878,6 +911,18 @@ body {
width: 100%;
}
.w-screen {
width: 100vw;
}
.w-3\/5 {
width: 60%;
}
.w-5\/6 {
width: 83.333333%;
}
.min-w-\[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));
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
.cursor-default {
cursor: default;
}
@ -939,6 +994,22 @@ body {
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-direction: row;
}
@ -1053,6 +1124,14 @@ body {
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;
}
@ -1314,6 +1393,16 @@ body {
line-height: 1rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-black {
font-weight: 900;
}
@ -1394,11 +1483,6 @@ body {
color: hsl(var(--secondary-foreground));
}
.text-slate-50 {
--tw-text-opacity: 1;
color: rgb(248 250 252 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
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 (
<>
{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
}
)}
>{e.label}</NavLink >))
}
{pathname}
</>
)
}