Replace absolute image paths
This commit is contained in:
@@ -33,9 +33,9 @@ export const Default = {
|
||||
},
|
||||
render: (args) => (
|
||||
<AvatarContainer {...args}>
|
||||
<Avatar size={args.size} src="/assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size={args.size} src="/assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size={args.size} src="/assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size={args.size} src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size={args.size} src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size={args.size} src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
),
|
||||
};
|
||||
@@ -47,36 +47,36 @@ export const Sizes = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Small Size</h3>
|
||||
<AvatarContainer size="small">
|
||||
<Avatar size="small" src="/assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="/assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="small" src="/assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="small" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<AvatarContainer size="medium">
|
||||
<Avatar size="medium" src="/assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="/assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="/assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="/assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="/assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="/assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">XLarge Size</h3>
|
||||
<AvatarContainer size="xlarge">
|
||||
<Avatar size="xlarge" src="/assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="xlarge" src="/assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="xlarge" src="/assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,38 +98,38 @@ export const DifferentGroupSizes = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">2 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="/assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="/assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">3 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="/assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="/assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="/assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">4 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="/assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="/assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="/assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="/assets/Avatar_1.png" alt="User 4" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">5 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="/assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="/assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="/assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="/assets/Avatar_1.png" alt="User 4" />
|
||||
<Avatar size="large" src="/assets/Avatar_2.png" alt="User 5" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 5" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
</div>
|
||||
@@ -158,9 +158,9 @@ export const InContext = {
|
||||
<h3 className="text-white font-semibold mb-4">Team Members</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="medium">
|
||||
<Avatar size="medium" src="/assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="/assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="/assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">3 team members</span>
|
||||
</div>
|
||||
@@ -172,10 +172,10 @@ export const InContext = {
|
||||
</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="/assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="/assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="/assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="/assets/Avatar_1.png" alt="User 4" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">4 contributors</span>
|
||||
</div>
|
||||
@@ -185,8 +185,8 @@ export const InContext = {
|
||||
<h3 className="text-white font-semibold mb-4">Small Team</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="small">
|
||||
<Avatar size="small" src="/assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="/assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">2 members</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user