Last active
March 22, 2024 19:03
-
-
Save davidshare/a66f35da5f80b9c0ea9210522f339d6d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// app/(dashboard)/journals/new/pages.tsx | |
import { | |
ResizableHandle, | |
ResizablePanel, | |
ResizablePanelGroup, | |
} from "@/components/ui/resizable"; | |
const NewJournal = () => { | |
return ( | |
<div className="w-full min-h-screen flex flex-col"> | |
<div className='text-3xl text-blue-900 h-36 bg-red-400'>testing</div> | |
<div className="w-full"> | |
<ResizablePanelGroup | |
direction="horizontal" | |
className="w-full rounded-lg border" | |
autoSaveId='maistoria-panel' | |
> | |
<ResizablePanel defaultSize={80}> | |
<div className="flex h-[200px] items-center justify-center p-6"> | |
<span className="font-semibold">One</span> | |
</div> | |
</ResizablePanel> | |
<ResizableHandle /> | |
<ResizablePanel defaultSize={20}> | |
<div className="flex h-[200px] items-center justify-center p-6"> | |
<span className="font-semibold bg-red-950 m-4">One</span> | |
</div> | |
</ResizablePanel> | |
</ResizablePanelGroup> | |
</div> | |
</div> | |
); | |
}; | |
export default NewJournal; | |
// app/(dashboard)/layout.tsx | |
"use client" | |
import MobileSidebar from '@/components/dashboard/MobileSidebar'; | |
import Sidebar from '@/components/dashboard/Sidebar'; | |
import Logo from '@/components/logo'; | |
const DashboardLayout = ({ children }: { children: React.ReactNode }) => { | |
return ( | |
<main className='flex'> | |
<Sidebar /> | |
<div className="md:hidden"> | |
<MobileSidebar /> | |
</div> | |
<section className='w-full min-h-screen'> | |
{children} | |
</section> | |
</main> | |
) | |
} | |
export default DashboardLayout; | |
// Tailwind config | |
import type { Config } from "tailwindcss" | |
const config = { | |
darkMode: ["class"], | |
content: [ | |
'./pages/**/*.{ts,tsx}', | |
'./components/**/*.{ts,tsx}', | |
'./app/**/*.{ts,tsx}', | |
'./src/**/*.{ts,tsx}', | |
], | |
prefix: "", | |
theme: { | |
container: { | |
center: true, | |
padding: "2rem", | |
screens: { | |
"2xl": "1400px", | |
}, | |
}, | |
extend: { | |
colors: { | |
border: "hsl(var(--border))", | |
input: "hsl(var(--input))", | |
ring: "hsl(var(--ring))", | |
background: "hsl(var(--background))", | |
foreground: "hsl(var(--foreground))", | |
primary: { | |
DEFAULT: "hsl(var(--primary))", | |
foreground: "hsl(var(--primary-foreground))", | |
}, | |
secondary: { | |
DEFAULT: "hsl(var(--secondary))", | |
foreground: "hsl(var(--secondary-foreground))", | |
}, | |
destructive: { | |
DEFAULT: "hsl(var(--destructive))", | |
foreground: "hsl(var(--destructive-foreground))", | |
}, | |
muted: { | |
DEFAULT: "hsl(var(--muted))", | |
foreground: "hsl(var(--muted-foreground))", | |
}, | |
accent: { | |
DEFAULT: "hsl(var(--accent))", | |
foreground: "hsl(var(--accent-foreground))", | |
}, | |
popover: { | |
DEFAULT: "hsl(var(--popover))", | |
foreground: "hsl(var(--popover-foreground))", | |
}, | |
card: { | |
DEFAULT: "hsl(var(--card))", | |
foreground: "hsl(var(--card-foreground))", | |
}, | |
}, | |
borderRadius: { | |
lg: "var(--radius)", | |
md: "calc(var(--radius) - 2px)", | |
sm: "calc(var(--radius) - 4px)", | |
}, | |
keyframes: { | |
"accordion-down": { | |
from: { height: "0" }, | |
to: { height: "var(--radix-accordion-content-height)" }, | |
}, | |
"accordion-up": { | |
from: { height: "var(--radix-accordion-content-height)" }, | |
to: { height: "0" }, | |
}, | |
}, | |
animation: { | |
"accordion-down": "accordion-down 0.2s ease-out", | |
"accordion-up": "accordion-up 0.2s ease-out", | |
}, | |
}, | |
}, | |
plugins: [require("tailwindcss-animate")], | |
} satisfies Config | |
export default config |
User
my nextjs code is exhibiting a very strange behaviour.
I have an app/(dashboard)/journals/new/pages.js page that uses a layout with a sidebar and a main section>
In this my pages file, I am trying to create the content section, which is the child passed to the layout component by nextjs.
The problem is that when I apply styles to this page, the styles don't work. However, if I copy the component with the styles to the layout.tsx page, and save, then remove it, the ones in the pages.tsx file sticks. So basically, nextjs only recognises styles that I have copied to the layout.tsx file. But this is not the same for other components and pages. Does anyone have an idea?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am experiencing a peculiar issue where styles applied to the NewJournal component in app/(dashboard)/journals/new/pages.tsx are not taking effect unless they are temporarily copied to the DashboardLayout component in app/(dashboard)/layout.tsx.