shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: optimize board rendering in workspace details

Browse Source
This commit is contained in:
Henry
2026-04-01 23:41:13 +01:00
parent 1e93d85318
commit 385bc0de61
1 changed files with 20 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/web/src/views/onboarding/workspace-details/index.tsx
View File

@@ -277,31 +277,26 @@ export default function WorkspaceNameView() {
</p> </p>
{/* Boards area */} {/* Boards area */}
<div className="mt-3 w-full flex-1 rounded-lg bg-light-200 p-2 dark:bg-dark-300"> <div className="mt-3 flex w-full flex-1 flex-col rounded-lg bg-light-200 p-2 dark:bg-dark-300">
<div className="space-y-1.5"> <div className="flex flex-1 flex-col gap-1.5">
<AnimatePresence> {BOARDS.map((board, i) => (
{[...BOARDS.slice(0, visibleCount)].reverse()
.map((board) => (
<motion.div <motion.div
key={board} key={board}
layout
initial={{ opacity: 0, y: -12 }} initial={{ opacity: 0, y: -12 }}
animate={{ opacity: 1, y: 0 }} animate={
i < visibleCount
? { opacity: 1, y: 0 }
: { opacity: 0, y: -12 }
}
transition={{ transition={{
layout: {
type: "spring",
stiffness: 300,
damping: 30,
},
opacity: { duration: 0.2 }, opacity: { duration: 0.2 },
y: { duration: 0.25, ease: "easeOut" }, y: { duration: 0.25, ease: "easeOut" },
}} }}
className="flex w-full items-center justify-center rounded border border-dashed border-light-400 bg-light-50 px-3 py-10 text-[10px] font-medium text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900" className="flex flex-1 w-full items-center justify-center rounded border border-dashed border-light-400 bg-light-50 px-3 text-[10px] font-medium text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900"
> >
{board} {board}
</motion.div> </motion.div>
))} ))}
</AnimatePresence>
</div> </div>
</div> </div>