franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

light mode

Browse Source
This commit is contained in:
Aman Varshney
2025-03-24 03:00:24 +05:30
parent 4b7dc843ca
commit 5255c21891
19 changed files with 346 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/web/src/app/(home)/_components/TechNodeComponent.tsx
View File

@@ -20,16 +20,16 @@ interface TechNodeData {
export function TechNodeComponent({ data }: { data: TechNodeData }) {
const baseStyles = `
relative lg:px-5 lg:py-4 px-3 py-1 rounded-lg
transition-all duration-300
border border-white/20
before:content-[''] before:absolute before:left-0 before:top-0 before:w-1.5 before:h-full
before:rounded-l-xl ${categoryIndicators[data.category]}
`;
relative lg:px-5 lg:py-4 px-3 py-1 rounded-lg
transition-all duration-300
dark:border-white/20 border-gray-300/30
before:content-[''] before:absolute before:left-0 before:top-0 before:w-1.5 before:h-full
before:rounded-l-xl ${categoryIndicators[data.category]}
`;
const activeStyles = data.isActive
? "opacity-100 bg-gradient-to-br from-indigo-900/10 to-violet-900/10"
: "opacity-80 hover:opacity-95 bg-slate-800";
? "opacity-100 dark:bg-gradient-to-br dark:from-indigo-900/10 dark:to-violet-900/10 bg-gradient-to-br from-indigo-100/40 to-violet-100/40"
: "opacity-80 hover:opacity-95 dark:bg-slate-800 bg-slate-100";
return (
<div className="relative group">
@@ -37,19 +37,19 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
<Handle
type="target"
position={Position.Top}
className="!w-2 !h-2 !bg-indigo-400/70"
className="!w-2 !h-2 !bg-indigo-400/70 dark:!bg-indigo-400/70"
/>
)}
<div className={`${baseStyles} ${activeStyles} backdrop-blur-3xl`}>
<div className="text-white font-medium lg:text-sm text-xs tracking-wide lg:mb-1.5 mb-1">
<div className="dark:text-white text-gray-800 font-medium lg:text-sm text-xs tracking-wide lg:mb-1.5 mb-1">
{data.label}
</div>
<div className="lg:text-[11px] text-[9px] leading-relaxed text-white/80">
<div className="lg:text-[11px] text-[9px] leading-relaxed dark:text-white/80 text-gray-700">
{data.description}
</div>
{!data.isDefault && !data.isStatic && (
<div className="lg:text-[10px] text-[8px] text-indigo-200/70 mt-2 italic">
<div className="lg:text-[10px] text-[8px] dark:text-indigo-200/70 text-indigo-500/70 mt-2 italic">
Alternative Option
</div>
)}
@@ -58,7 +58,7 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
<Handle
type="source"
position={Position.Bottom}
className="!w-2 !h-2 !bg-indigo-400/70"
className="!w-2 !h-2 !bg-indigo-400/70 dark:!bg-indigo-400/70"
/>
</div>
);