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'] {
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'
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 }> = {
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
return (
// Replaced hardcoded max-w-5xl and section with the unified Container
<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) => {
const { border, dot } = colorMap[col.color ?? 'gray'] ?? colorMap.gray
return (
<div
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">
<span className={`w-2 h-2 rounded-full shrink-0 ${dot}`} />
@ -37,18 +38,35 @@ export function KanbanColorBlock({ columns }: Props) {
{col.title}
</span>
</div>
{Array.isArray(col.cards) &&
col.cards.map((card, j) => (
<div
key={j}
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>
{card.subtitle && (
<p className="text-[11px] text-foreground/40">{card.subtitle}</p>
<div className="flex flex-col gap-3">
{col.cards?.map((card, j) => (
<React.Fragment key={j}>
<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>
{card.subtitle && (
<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>
)
})}