Skip to content

Instantly share code, notes, and snippets.

@davidshare
Last active March 22, 2024 19:03
Show Gist options
  • Save davidshare/a66f35da5f80b9c0ea9210522f339d6d to your computer and use it in GitHub Desktop.
Save davidshare/a66f35da5f80b9c0ea9210522f339d6d to your computer and use it in GitHub Desktop.
// 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
@davidshare
Copy link
Author

davidshare commented Mar 22, 2024

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