admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Added loader and counter animations (#4931)

Browse Source 
Added loader animation: 


https://github.com/twentyhq/twenty/assets/102751374/c569762a-f512-4995-ac4d-47570bacdcaa

Added counter animation: 


https://github.com/twentyhq/twenty/assets/102751374/7d96c625-b56a-4ef6-8042-8e71455caf67

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Ady Beraud
2024-04-12 10:27:32 +02:00
committed by GitHub
parent 138fcbf45f
commit 432d041203
6 changed files with 110 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/twenty-website/src/app/_components/contributors/AvatarGrid.tsx
View File

@ -3,6 +3,8 @@
import styled from '@emotion/styled';
import Link from 'next/link';
import MotionContainer from '@/app/_components/ui/layout/LoaderAnimation';
export interface User {
id: string;
avatarUrl: string;
@ -67,16 +69,18 @@ import React from 'react';
const AvatarGrid = ({ users }: { users: User[] }) => {
return (
<AvatarGridContainer>
{users.map((user) => (
<Link href={`/contributors/${user.id}`} key={`l_${user.id}`}>
<AvatarItem key={user.id}>
<img src={user.avatarUrl} alt={user.id} />
<span className="username">{user.id}</span>
</AvatarItem>
</Link>
))}
</AvatarGridContainer>
<MotionContainer>
<AvatarGridContainer>
{users.map((user) => (
<Link href={`/contributors/${user.id}`} key={`l_${user.id}`}>
<AvatarItem key={user.id}>
<img src={user.avatarUrl} alt={user.id} />
<span className="username">{user.id}</span>
</AvatarItem>
</Link>
))}
</AvatarGridContainer>
</MotionContainer>
);
};