feat(fonts): implement Phase 1 - Create Proxy API Client
- Created src/entities/Font/api/proxy/proxyFonts.ts - Implemented fetchProxyFonts function with full pagination support - Implemented fetchProxyFontById convenience function - Added TypeScript interfaces: ProxyFontsParams, ProxyFontsResponse - Added comprehensive JSDoc documentation - Updated src/entities/Font/api/index.ts to export proxy API Phase 1/7: Proxy API Integration for GlyphDiff
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
<script lang="ts">
|
||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||
|
||||
interface Props {
|
||||
text: string;
|
||||
fontName: string;
|
||||
isAnimating: boolean;
|
||||
onAnimationComplete?: () => void;
|
||||
}
|
||||
|
||||
let { text, fontName, isAnimating, onAnimationComplete }: Props = $props();
|
||||
|
||||
// Split text into characters, preserving spaces
|
||||
const chars = $derived(text.split('').map(c => c === ' ' ? '\u00A0' : c));
|
||||
|
||||
let completedCount = 0;
|
||||
|
||||
function handleTransitionEnd() {
|
||||
completedCount++;
|
||||
if (completedCount === chars.length) {
|
||||
onAnimationComplete?.();
|
||||
completedCount = 0;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="relative inline-flex flex-wrap leading-tight">
|
||||
{#each chars as char, i}
|
||||
<span
|
||||
class={cn(
|
||||
'inline-block transition-all duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)]',
|
||||
isAnimating ? 'opacity-0 -translate-y-4 rotate-x-90' : 'opacity-100 translate-y-0 rotate-x-0',
|
||||
)}
|
||||
style:font-family={fontName}
|
||||
style:transition-delay="{i * 25}ms"
|
||||
ontransitionend={i === chars.length - 1 ? handleTransitionEnd : null}
|
||||
>
|
||||
{char}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Necessary for the "Flip" feel */
|
||||
div {
|
||||
perspective: 1000px;
|
||||
}
|
||||
span {
|
||||
transform-style: preserve-3d;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user