forked from cerc-io/snowballtools-base
ea44efa0f2
* ⚡️ feat: create tabs component * ♻️ refactor: avoid big conflict on the example page * 🔧 chore: upgrade tailwindcss and install `@radix-ui/react-tabs` * ⚡️ feat: create globe icon component * 🎨 style: adjust vertical tab theme * 📝 docs: add vertical tabs to the example page
20 lines
617 B
TypeScript
20 lines
617 B
TypeScript
import React from 'react';
|
|
import { Avatar, AvatarVariants } from 'components/shared/Avatar';
|
|
|
|
const avatarSizes: AvatarVariants['size'][] = [18, 20, 24, 28, 32, 36, 40, 44];
|
|
const avatarVariants: AvatarVariants['type'][] = ['gray', 'orange', 'blue'];
|
|
|
|
export const avatars = avatarSizes.map((size) => {
|
|
return (
|
|
<Avatar initials="SY" key={String(size)} size={size} imageSrc="/gray.png" />
|
|
);
|
|
});
|
|
|
|
export const avatarsFallback = avatarVariants.map((color) => {
|
|
return avatarSizes.map((size) => {
|
|
return (
|
|
<Avatar initials="SY" key={`${color}-${size}`} type={color} size={size} />
|
|
);
|
|
});
|
|
});
|