import { Component } from '@angular/core';
import { Clipboard } from '@freelancer/clipboard';
import { FontColor, FontWeight, TextSize } from '@freelancer/ui/text';
@Component({
selector: 'fl-animated-svg-animated-svg-list-story',
template: `
<fl-text
[color]="FontColor.ERROR"
[flMarginBottom]="'small'"
[weight]="FontWeight.BOLD"
>
Click on an SVG to copy name to clipboard
</fl-text>
<div class="SvgList">
<div
class="SvgItem"
*ngFor="let animatedSvgName of animatedSvgNames"
>
<fl-animated-svg
class="AnimatedSvg"
[name]="animatedSvgName"
[clickable]="true"
(click)="copyToClipboard(animatedSvgName)"
></fl-animated-svg>
<fl-text [size]="TextSize.XXXSMALL"> {{ animatedSvgName }} </fl-text>
</div>
</div>
`,
styleUrls: ['./animated-svg-list.story.scss'],
})
export class AnimatedSvgAnimatedSvgListStoryComponent {
FontColor = FontColor;
FontWeight = FontWeight;
TextSize = TextSize;
readonly animatedSvgNames: readonly string[] = [
'animation-bird-illuminated',
'animation-bird-loading-simple',
'animation-bird-loading-sparkling',
'animation-pvp-bids-empty',
'animation-pvp-tasklist-empty',
'animation-user-list-empty',
'animation-user-profile-reviews-empty',
'animation-sparkles-v2',
];
constructor(private clipboard: Clipboard) {}
copyToClipboard(name: string): boolean | void {
return this.clipboard.copy(
`<fl-animated-svg [name]="'${name}'"></fl-animated-svg>`,
);
}
}
@use "settings/settings" as *;
.SvgList {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
}
.SvgItem {
border-radius: $border-radius;
cursor: pointer;
flex: 0 0 50%;
padding: $spacing-xsmall $spacing-xxsmall;
text-align: center;
&:hover {
background-color: var(--color-bg-dark);
.AnimatedSvg {
transform: scale(1.2);
}
}
}
.AnimatedSvg {
transition: transform 0.2s ease-out;
}