rootadmin/multisite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

guide

Browse source
This commit is contained in:
Mackie 2026-06-08 11:01:11 +08:00
parent 02430083cc
commit 28ea117514
2 changed files with 48 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/app/(frontend)/globals.css
View file

@ -222,3 +222,19 @@ html[data-theme='dark'],
html[data-theme='light'] { html[data-theme='light'] {
opacity: initial; opacity: initial;
} }
/* Add this class to your column div */
.column-with-connector {
position: relative;
}
@media (min-width: 1024px) {
.column-with-connector::after {
content: "→";
position: absolute;
right: -24px;
top: 50%;
color: rgba(var(--foreground), 0.2);
font-size: 24px;
}
}

46
src/blocks/KanbanColor/Component.tsx
View file

@ -1,7 +1,7 @@
'use client' 'use client'
import React from 'react' import React from 'react'
import { Container } from '@/components/ui/Container' // Ensure this path is correct import { Container } from '@/components/ui/Container'
const colorMap: Record<string, { border: string; dot: string }> = { const colorMap: Record<string, { border: string; dot: string }> = {
gray: { border: 'border-t-[#888780]', dot: 'bg-[#888780]' }, gray: { border: 'border-t-[#888780]', dot: 'bg-[#888780]' },
@ -21,15 +21,16 @@ export function KanbanColorBlock({ columns }: Props) {
if (!Array.isArray(columns) || columns.length === 0) return null if (!Array.isArray(columns) || columns.length === 0) return null
return ( return (
// Replaced hardcoded max-w-5xl and section with the unified Container
<Container className="py-12 md:py-24"> <Container className="py-12 md:py-24">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{columns.map((col, i) => { {columns.map((col, i) => {
const { border, dot } = colorMap[col.color ?? 'gray'] ?? colorMap.gray const { border, dot } = colorMap[col.color ?? 'gray'] ?? colorMap.gray
return ( return (
<div <div
key={i} key={i}
className={`bg-muted/50 rounded-2xl p-6 flex flex-col gap-4 border-t-[3px] ${border}`} // Added your custom class for the horizontal arrow
className={`column-with-connector bg-muted/50 rounded-2xl p-6 flex flex-col gap-4 border-t-[3px] ${border}`}
> >
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<span className={`w-2 h-2 rounded-full shrink-0 ${dot}`} /> <span className={`w-2 h-2 rounded-full shrink-0 ${dot}`} />
@ -37,18 +38,35 @@ export function KanbanColorBlock({ columns }: Props) {
{col.title} {col.title}
</span> </span>
</div> </div>
{Array.isArray(col.cards) &&
col.cards.map((card, j) => ( <div className="flex flex-col gap-3">
<div {col.cards?.map((card, j) => (
key={j} <React.Fragment key={j}>
className="bg-background/70 border border-foreground/5 rounded-xl px-4 py-3 flex flex-col gap-1" <div className="bg-background/70 border border-foreground/5 rounded-xl px-4 py-3 flex flex-col gap-1">
> <p className="text-sm font-medium text-foreground/80">{card.title}</p>
<p className="text-sm font-medium text-foreground/80">{card.title}</p> {card.subtitle && (
{card.subtitle && ( <p className="text-[11px] text-foreground/40">{card.subtitle}</p>
<p className="text-[11px] text-foreground/40">{card.subtitle}</p> )}
</div>
{/* Vertical Connector Arrow */}
{j < (col.cards?.length || 0) - 1 && (
<div className="flex justify-center text-foreground/20">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<path d="M12 5v14M19 12l-7 7-7-7" />
</svg>
</div>
)} )}
</div> </React.Fragment>
))} ))}
</div>
</div> </div>
) )
})} })}