✨ feat(people): add people page

2026-01-27 16:01:12 +01:00
parent d356ffe31c
commit 2c546e766b
17 changed files with 165 additions and 3 deletions
@@ -0,0 +1,28 @@
+import { Card, CardContent, CardMedia, CardProps, Typography } from '@mui/material'
+import { FC } from 'react'
+
+export interface EmplyeeCardProps extends CardProps {
+  name: string
+  image: string
+  position?: string
+}
+
+export const EmplyeeCard: FC<EmplyeeCardProps> = ({ name, position, image, sx, ...props }) => {
+  return (
+    <Card sx={{ flexShrink: 0, width: 270, height: 360, ...sx }} {...props}>
+      <CardMedia component="img" sx={{ minHeight: '140' }} image={image} alt={`${name} image`} />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          {name}
+        </Typography>
+        {position && (
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {position}
+          </Typography>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default EmplyeeCard
@@ -0,0 +1,56 @@
+// src/components/StackedDeck.tsx
+import { FC, useEffect, useState } from 'react'
+import { Box } from '@mui/material'
+import { EmplyeeCard, EmplyeeCardProps } from 'components/molecules/EmplyeeCard/index.js'
+
+interface Props {
+  items: EmplyeeCardProps[]
+
+  // Visual offsets
+  offsetStep?: number // px shift per card
+  maxVisible?: number // how many cards we actually render (performance)
+}
+
+const EmplyeeStack: FC<Props> = ({
+  offsetStep = 10, // px shift per card
+  maxVisible = 6, // how many cards we actually render (performance)
+  items: initialItems,
+}) => {
+  const [items, setItems] = useState(initialItems)
+
+  useEffect(() => {
+    setItems(initialItems)
+  }, [initialItems])
+
+  const handleTopClick = () => {
+    if (items.length) {
+      setItems([...items.slice(1), items[0]])
+    }
+  }
+
+  return (
+    <Box
+      onClick={handleTopClick}
+      sx={{
+        position: 'relative',
+        width: 270 + offsetStep * (initialItems.length - 1),
+        height: 360 + offsetStep * (initialItems.length - 1),
+      }}>
+      {items.slice(0, maxVisible).map((props, idx) => (
+        <EmplyeeCard
+          {...props}
+          key={idx}
+          sx={{
+            cursor: 'pointer',
+            position: 'absolute',
+            top: idx * offsetStep,
+            left: idx * offsetStep,
+            zIndex: initialItems.length - idx, // top card gets highest z-index
+          }}
+        />
+      ))}
+    </Box>
+  )
+}
+
+export default EmplyeeStack