Skip to content

Commit

Permalink
refactor:scrrol custom css add
Browse files Browse the repository at this point in the history
  • Loading branch information
@ademsuslu
ademsuslu committed Nov 17, 2024
1 parent ab207f7 commit 93c99a7
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 112 deletions.
2 changes: 1 addition & 1 deletion app/(dashboard)/opportunity/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default async function OpportunityPage() {
console.log(data)

return (
<div className=''>
<div>
<KanbanTable data={data} />
</div>
)
Expand Down
20 changes: 20 additions & 0 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,29 @@
body {
@apply bg-background text-foreground;
}

@layer utilities {
.custom-shadow {
box-shadow: 0 0 7px 0px rgba(0, 0, 0, 0.25); /* Sadece alta gölge */
}
.scrollbar::-webkit-scrollbar {
width: 5px;
height: 5px;
}

.scrollbar::-webkit-scrollbar-track {
border-radius: 100vh;
background: #374151;
}

.scrollbar::-webkit-scrollbar-thumb {
background: #111827;
border-radius: 100vh;
border: 3px solid #f6f7ed;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
background: ##d1d5db;
}
}
}
64 changes: 35 additions & 29 deletions components/shared/drag_drop/Tables.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, { useState } from "react";
import { motion } from "framer-motion";
import { Opportunity } from "@/types/Opportunity/model";
import { MdOutlineDragIndicator } from "react-icons/md";
import { Button } from "@/components/ui/button";

// Aşamalar için sabit liste
const stages = ["İletişim", "Teklif", "Görüşme", "Kapalı", "Kazandı", "Kaybetti"] as const;
Expand Down Expand Up @@ -53,37 +54,42 @@ const KanbanTable: React.FC<Props> = ({ data }) => {
};

return (
<div className="flex bg-red-300 gap-4 p-4 overflow-x-scroll max-w-[1000px] space-x-4 border rounded ">
{stages.map((stage) => (
<div
key={stage}
className="flex-1 p-4 bg-secondary-foreground rounded-lg shadow-md"
onDragOver={(e) => e.preventDefault()} // Drop işlemini etkinleştirme
onDrop={(e) => onDrop(e, stage)} // Bırakma sırasında çağırılan fonksiyon
>
<h2 className="text-lg font-bold mb-4 text-gray-700">{stage}</h2>
<div className="space-y-4 w-[250px] ">
{opportunities
.filter((opp) => opp.stage === stage)
.map((opp) => (
<motion.div
key={opp._id}
className="p-4 flex items-center justify-start text-sm text-black bg-white rounded-lg shadow-sm cursor-grab"
draggable
onDragStart={(e: any) => {
e.dataTransfer.setData("text/plain", opp._id);
}}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<MdOutlineDragIndicator className="w-6 h-6 mr-2" />
<div className="flex flex-col space-y-2 w-full">
<div className="">
<Button variant={"secondary"}>Add to cart</Button>
</div>
<div className="flex gap-4 p-4 scrollbar overflow-x-scroll max-w-[1070px] app-scrollbar app-scrollbar--dark space-x-4 border rounded ">
{stages.map((stage) => (
<div
key={stage}
className="flex-1 p-4 bg-secondary-foreground rounded-lg shadow-md"
onDragOver={(e) => e.preventDefault()} // Drop işlemini etkinleştirme
onDrop={(e) => onDrop(e, stage)} // Bırakma sırasında çağırılan fonksiyon
>
<h2 className="text-lg font-bold mb-4 text-gray-700">{stage}</h2>
<div className="space-y-4 w-[200px] ">
{opportunities
.filter((opp) => opp.stage === stage)
.map((opp) => (
<motion.div
key={opp._id}
className="p-4 flex items-center justify-start text-sm text-black bg-white rounded-lg shadow-sm cursor-grab"
draggable
onDragStart={(e: any) => {
e.dataTransfer.setData("text/plain", opp._id);
}}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<MdOutlineDragIndicator className="w-6 h-6 mr-2" />

{opp.name}
</motion.div>
))}
{opp.name}
</motion.div>
))}
</div>
</div>
</div>
))}
))}
</div>
</div>
);
};
Expand Down
167 changes: 85 additions & 82 deletions tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,86 +8,89 @@ const config: Config = {
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
animation: {
scroll: 'scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite'
},
keyframes: {
scroll: {
to: {
transform: 'translate(calc(-50% - 0.5rem))'
}
}
},
boxShadow: {
shadow: '0 35px 60px -15px rgba(255,255,255, 0.9);'
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
},
borderRadius: {
none: '0',
sm: '0.125rem',
md: '0.375rem',
lg: '0.5rem',
full: '9999px',
large: '12px'
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
},
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
primary: 'hsl(var(--sidebar-primary))',
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))'
}
}
}
},
plugins: [require("tailwindcss-animate")],
}
extend: {
animation: {
scroll: 'scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite'
},
keyframes: {
scroll: {
to: {
transform: 'translate(calc(-50% - 0.5rem))'
}
}
},
boxShadow: {
shadow: '0 35px 60px -15px rgba(255,255,255, 0.9);'
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
},
borderRadius: {
none: '0',
sm: '0.125rem',
md: '0.375rem',
lg: '0.5rem',
full: '9999px',
large: '12px'
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
},
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
primary: 'hsl(var(--sidebar-primary))',
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))'
}
}
}
},
plugins: [
require("tailwindcss-animate"),

],
} satisfies Config
export default config

0 comments on commit 93c99a7

Please sign in to comment.