@stackshift-ui/team 6.0.12 → 6.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +15 -15
  2. package/src/team_a.tsx +11 -9
  3. package/src/team_b.tsx +22 -20
  4. package/src/team_d.tsx +13 -21
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackshift-ui/team",
3
3
  "description": "",
4
- "version": "6.0.12",
4
+ "version": "6.0.13",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "main": "./dist/index.js",
@@ -29,29 +29,29 @@
29
29
  "typescript": "^5.6.2",
30
30
  "vite-tsconfig-paths": "^5.0.1",
31
31
  "vitest": "^2.1.1",
32
- "@stackshift-ui/eslint-config": "6.0.8",
33
- "@stackshift-ui/typescript-config": "6.0.8"
32
+ "@stackshift-ui/typescript-config": "6.0.9",
33
+ "@stackshift-ui/eslint-config": "6.0.9"
34
34
  },
35
35
  "dependencies": {
36
36
  "classnames": "^2.5.1",
37
- "@stackshift-ui/button": "6.0.9",
38
- "@stackshift-ui/heading": "6.0.9",
39
- "@stackshift-ui/card": "6.0.9",
40
- "@stackshift-ui/system": "6.0.9",
41
- "@stackshift-ui/container": "6.0.9",
42
- "@stackshift-ui/section": "6.0.9",
43
- "@stackshift-ui/text": "6.0.9",
44
- "@stackshift-ui/image": "6.0.9",
45
- "@stackshift-ui/flex": "6.0.9",
46
- "@stackshift-ui/scripts": "6.0.8",
47
- "@stackshift-ui/avatar": "6.0.11"
37
+ "@stackshift-ui/scripts": "6.0.9",
38
+ "@stackshift-ui/system": "6.0.10",
39
+ "@stackshift-ui/button": "6.0.10",
40
+ "@stackshift-ui/card": "6.0.10",
41
+ "@stackshift-ui/avatar": "6.0.12",
42
+ "@stackshift-ui/heading": "6.0.10",
43
+ "@stackshift-ui/text": "6.0.10",
44
+ "@stackshift-ui/image": "6.0.10",
45
+ "@stackshift-ui/section": "6.0.10",
46
+ "@stackshift-ui/container": "6.0.10",
47
+ "@stackshift-ui/flex": "6.0.10"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "@types/react": "16.8 - 19",
51
51
  "next": "10 - 14",
52
52
  "react": "16.8 - 19",
53
53
  "react-dom": "16.8 - 19",
54
- "@stackshift-ui/system": ">=6.0.9"
54
+ "@stackshift-ui/system": ">=6.0.10"
55
55
  },
56
56
  "peerDependenciesMeta": {
57
57
  "next": {
package/src/team_a.tsx CHANGED
@@ -12,8 +12,8 @@ import { Team as iTeam } from "./types";
12
12
  export default function Team_A({ caption, title, team }: TeamsProps) {
13
13
  return (
14
14
  <Section className="py-20 bg-background">
15
- <Container maxWidth={1000}>
16
- <Container maxWidth={576} className="mb-10 text-center">
15
+ <Container maxWidth={1280}>
16
+ <Container className="mb-10 text-center">
17
17
  <CaptionAndTitle caption={caption} title={title} />
18
18
  </Container>
19
19
  <Teams team={team} />
@@ -43,15 +43,17 @@ function Teams({ team }: { team?: iTeam[] }) {
43
43
  if (!team) return null;
44
44
 
45
45
  return (
46
- <Flex wrap>
46
+ <Flex wrap align="center" justify="center" gap={6}>
47
47
  {team?.map(member => (
48
- <div className="w-full px-3 mb-6 md:w-1/2 lg:w-1/3" key={member?.name}>
49
- <Card className="py-24 text-center shadow-lg bg-white" borderRadius="md">
48
+ <div className="w-full [@media(min-width:421px)]:w-96 sm:w-1/2 lg:w-1/3" key={member?.name}>
49
+ <Card
50
+ className="py-10 [@media(min-width:320px)]:py-20 items-center text-center shadow-lg bg-white flex flex-col gap-4"
51
+ borderRadius="md">
50
52
  {member?.mainImage?.image && (
51
53
  <Image
52
54
  width={96}
53
55
  height={96}
54
- className="mx-auto border-0 w-[96px] h-[96px] object-cover rounded-full"
56
+ className="border-0 w-28 h-28 object-cover rounded-full"
55
57
  src={`${member?.mainImage?.image}`}
56
58
  alt={member?.mainImage?.alt ?? `team-member-${member?.name}-profile-image`}
57
59
  />
@@ -66,12 +68,12 @@ function Teams({ team }: { team?: iTeam[] }) {
66
68
 
67
69
  function TeamMemberText({ member }: MemberTextProps) {
68
70
  return (
69
- <React.Fragment>
70
- <Heading type="h3" className="mb-2 text-xl lg:text-2xl">
71
+ <div className="flex flex-col gap-2">
72
+ <Heading type="h3" className="text-xl lg:text-2xl">
71
73
  {member?.name}
72
74
  </Heading>
73
75
  <Text muted>{member?.jobTitle}</Text>
74
- </React.Fragment>
76
+ </div>
75
77
  );
76
78
  }
77
79
 
package/src/team_b.tsx CHANGED
@@ -43,7 +43,7 @@ function TeamTabs({ team, activeTab, setActiveTab }: TeamTabsProps) {
43
43
  wrap
44
44
  justify="center"
45
45
  direction="row"
46
- className="space-x-6 lg:flex-col lg:justify-start lg:space-x-0">
46
+ className="lg:flex-col lg:justify-start gap-3">
47
47
  {team?.map(item => (
48
48
  <TeamTab key={item.name} data={item} activeTab={activeTab} setActiveTab={setActiveTab} />
49
49
  ))}
@@ -67,8 +67,8 @@ function TeamTab({ data, activeTab, setActiveTab }: TeamTabProps) {
67
67
  as="button"
68
68
  variant="unstyled"
69
69
  ariaLabel={data.name}
70
- className={`mb-4 text-xl lg:text-2xl ${
71
- data.name === activeTab ? "text-gray-900" : "text-gray-500"
70
+ className={`text-xl lg:text-2xl ${
71
+ data.name === activeTab ? "text-black" : "text-gray-400"
72
72
  } font-bold hover:text-gray-500 focus:outline-none`}
73
73
  onClick={() => setActiveTab(data.name ?? "")}>
74
74
  {data.name}
@@ -81,7 +81,7 @@ function TeamMembersList({ members }: { members?: iTeam[] }) {
81
81
  if (!members) return null;
82
82
 
83
83
  return (
84
- <div className="w-full px-3 lg:w-2/3">
84
+ <div className="w-full lg:w-2/3 sm:p-6">
85
85
  {members.map((member, index) => (
86
86
  <TeamMemberCard key={index} member={member} />
87
87
  ))}
@@ -93,32 +93,34 @@ function TeamMemberCard({ member }: { member?: iTeam }) {
93
93
  if (!member) return null;
94
94
 
95
95
  return (
96
- <Card className="flex p-6 shadow-lg bg-white" borderRadius="md">
96
+ <Card
97
+ className="flex flex-col gap-3 md:gap-0 md:flex-row shadow-lg bg-white md:h-96"
98
+ borderRadius="md">
97
99
  {member.mainImage?.image && (
98
- <Image
99
- className="object-cover overflow-hidden rounded-md"
100
- src={`${member.mainImage.image}`}
101
- sizes="100vw"
102
- width={329}
103
- height={494}
104
- alt={member.mainImage.alt ?? `team-member-${member.name}-profile-image`}
105
- />
100
+ <div className="w-full md:w-1/2 h-48 md:h-full relative overflow-hidden rounded-md">
101
+ <Image
102
+ className="object-cover absolute inset-0 w-full h-full"
103
+ src={`${member.mainImage.image}`}
104
+ sizes="100vw"
105
+ width={329}
106
+ height={500}
107
+ alt={member.mainImage.alt ?? `team-member-${member.name}-profile-image`}
108
+ />
109
+ </div>
106
110
  )}
107
- <TeamMmeberText member={member} />
111
+ <TeamMemberText member={member} />
108
112
  </Card>
109
113
  );
110
114
  }
111
115
 
112
- function TeamMmeberText({ member }: MemberTextProps) {
116
+ function TeamMemberText({ member }: MemberTextProps) {
113
117
  return (
114
- <div className="order-last w-1/2 pt-6 pl-6 mt-6">
118
+ <div className="w-full md:w-1/2 md:p-6 max-h-[300px] md:max-h-96 overflow-y-auto">
115
119
  <Text weight="bold" fontSize="2xl">
116
120
  {member.name}
117
121
  </Text>
118
- <Text className="mb-6" muted>
119
- {member.jobTitle}
120
- </Text>
121
- <Text className="mb-6 text-justify" muted>
122
+ <Text muted>{member.jobTitle}</Text>
123
+ <Text className="text-justify mt-4" muted>
122
124
  {member.plainText}
123
125
  </Text>
124
126
  </div>
package/src/team_d.tsx CHANGED
@@ -39,21 +39,19 @@ function TeamMemberCard({ team }: { team?: iTeam[] }) {
39
39
  <Flex wrap>
40
40
  {team &&
41
41
  team.map((member, index) => (
42
- <div className="w-full px-4 mb-6 md:w-1/2" key={index}>
42
+ <div className="w-full md:px-4 mb-6 md:w-1/2" key={index}>
43
43
  <Card
44
- className="items-center p-0 bg-white overflow-hidden shadow-lg lg:block xl:flex"
44
+ className="flex flex-col xl:flex-row items-center gap-3 bg-white overflow-hidden shadow-lg "
45
45
  borderRadius="md">
46
46
  {member.mainImage?.image && (
47
- <div>
48
- <Image
49
- className="h-[320px] w-full object-cover rounded-md xl:w-[179px]"
50
- sizes="100vw"
51
- src={`${member?.mainImage?.image}`}
52
- width={179}
53
- height={320}
54
- alt={member?.mainImage?.alt ?? `team-member-${member?.name}-profile-image`}
55
- />
56
- </div>
47
+ <Image
48
+ className="h-full w-full object-cover rounded-md [@media(min-width:320px)]:h-[320px] xl:w-[179px]"
49
+ sizes="100vw"
50
+ src={`${member?.mainImage?.image}`}
51
+ width={179}
52
+ height={320}
53
+ alt={member?.mainImage?.alt ?? `team-member-${member?.name}-profile-image`}
54
+ />
57
55
  )}
58
56
  <TeamMemberText member={member} />
59
57
  </Card>
@@ -65,17 +63,11 @@ function TeamMemberCard({ team }: { team?: iTeam[] }) {
65
63
 
66
64
  function TeamMemberText({ member }: MemberTextProps) {
67
65
  return (
68
- <div className="w-full lg:p-4 xl:w-2/3">
69
- <Text
70
- weight="bold"
71
- className="my-2 text-lg sm:text-xl md:text-2xl"
72
- >
66
+ <div className="w-full xl:w-2/3 flex flex-col gap-2">
67
+ <Text weight="bold" className="text-lg sm:text-xl md:text-2xl">
73
68
  {member?.name}
74
69
  </Text>
75
- <Text
76
- className="mb-4 leading-loose text-sm md:text-base"
77
- muted
78
- >
70
+ <Text className="leading-loose text-sm md:text-base" muted>
79
71
  {member?.plainText}
80
72
  </Text>
81
73
  </div>