fix: replace motion/react imports with framer-motion + rounded content panel
- 4 files imported from 'motion/react' which was the removed 'motion' package. Replaced with 'framer-motion' (the package actually installed). - Dashboard content area now has rounded corners, subtle border, and inset margin creating a "panel inside shell" visual separation from the sidebar.
This commit is contained in:
@@ -31,14 +31,15 @@ export default function DashboardShell({
|
|||||||
const openMobile = useCallback(() => setMobileOpen(true), [])
|
const openMobile = useCallback(() => setMobileOpen(true), [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen overflow-hidden">
|
<div className="flex h-screen overflow-hidden bg-neutral-950">
|
||||||
<Sidebar
|
<Sidebar
|
||||||
siteId={siteId}
|
siteId={siteId}
|
||||||
mobileOpen={mobileOpen}
|
mobileOpen={mobileOpen}
|
||||||
onMobileClose={closeMobile}
|
onMobileClose={closeMobile}
|
||||||
onMobileOpen={openMobile}
|
onMobileOpen={openMobile}
|
||||||
/>
|
/>
|
||||||
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
{/* Content panel — rounded on all corners with slight inset to separate from sidebar */}
|
||||||
|
<div className="flex-1 flex flex-col min-w-0 overflow-hidden my-2 mr-2 rounded-2xl bg-neutral-900 border border-neutral-800/60">
|
||||||
<ContentHeader onMobileMenuOpen={openMobile} />
|
<ContentHeader onMobileMenuOpen={openMobile} />
|
||||||
<main className="flex-1 overflow-y-auto pt-4">
|
<main className="flex-1 overflow-y-auto pt-4">
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { motion, useSpring, useTransform } from "motion/react";
|
import { motion, useSpring, useTransform } from "framer-motion";
|
||||||
import {
|
import {
|
||||||
type CSSProperties,
|
type CSSProperties,
|
||||||
type ReactNode,
|
type ReactNode,
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ import {
|
|||||||
motion,
|
motion,
|
||||||
useMotionTemplate,
|
useMotionTemplate,
|
||||||
useSpring,
|
useSpring,
|
||||||
} from "motion/react";
|
} from "framer-motion";
|
||||||
import {
|
import {
|
||||||
Children,
|
Children,
|
||||||
createContext,
|
createContext,
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import {
|
|||||||
AnimatePresence,
|
AnimatePresence,
|
||||||
motion,
|
motion,
|
||||||
useSpring,
|
useSpring,
|
||||||
} from "motion/react";
|
} from "framer-motion";
|
||||||
import {
|
import {
|
||||||
Children,
|
Children,
|
||||||
createContext,
|
createContext,
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { motion, useSpring, useTransform } from "motion/react";
|
import { motion, useSpring, useTransform } from "framer-motion";
|
||||||
import {
|
import {
|
||||||
type CSSProperties,
|
type CSSProperties,
|
||||||
type ReactNode,
|
type ReactNode,
|
||||||
|
|||||||
Reference in New Issue
Block a user