feat: add TemplateGrid and TitleBar components with tests

- Implemented TemplateGrid component for displaying templates in a grid layout.
- Added calculateCardWidth helper function for dynamic card sizing.
- Created TitleBar component for displaying the title and points with interaction.
- Added unit tests for TemplateGrid and TitleBar components to ensure proper functionality.
- Introduced useStickyTabs and useTabNavigation hooks with tests for managing sticky tab behavior and navigation logic.
- Implemented useTemplateFilter hook for filtering templates based on video content.
- Added comprehensive tests for all new hooks and components to validate behavior and edge cases.

components/blocks/home/TemplateCard.test.tsx

@@ -0,0 +1,80 @@
+import { parseAspectRatio, getImageUri, TemplateCard } from './TemplateCard'
+
+describe('TemplateCard Utilities', () => {
+  describe('parseAspectRatio', () => {
+    it('should parse "128:128" to 1', () => {
+      expect(parseAspectRatio('128:128')).toBe(1)
+    })
+
+    it('should parse "16:9" to approximately 1.777', () => {
+      const result = parseAspectRatio('16:9')
+      expect(result).toBeCloseTo(16 / 9, 5)
+    })
+
+    it('should parse "9:16" to approximately 0.5625', () => {
+      const result = parseAspectRatio('9:16')
+      expect(result).toBeCloseTo(9 / 16, 5)
+    })
+
+    it('should parse "1.5" to 1.5', () => {
+      expect(parseAspectRatio('1.5')).toBe(1.5)
+    })
+
+    it('should parse "2" to 2', () => {
+      expect(parseAspectRatio('2')).toBe(2)
+    })
+
+    it('should return undefined for undefined input', () => {
+      expect(parseAspectRatio(undefined)).toBeUndefined()
+    })
+
+    it('should return undefined for empty string', () => {
+      expect(parseAspectRatio('')).toBeUndefined()
+    })
+  })
+
+  describe('getImageUri', () => {
+    it('should prioritize webpPreviewUrl over previewUrl', () => {
+      const result = getImageUri(
+        'https://example.com/preview.webp',
+        'https://example.com/preview.jpg',
+        'https://example.com/cover.jpg'
+      )
+      expect(result).toBe('https://example.com/preview.webp')
+    })
+
+    it('should use previewUrl when webpPreviewUrl is not provided', () => {
+      const result = getImageUri(
+        undefined,
+        'https://example.com/preview.jpg',
+        'https://example.com/cover.jpg'
+      )
+      expect(result).toBe('https://example.com/preview.jpg')
+    })
+
+    it('should use coverImageUrl as fallback', () => {
+      const result = getImageUri(
+        undefined,
+        undefined,
+        'https://example.com/cover.jpg'
+      )
+      expect(result).toBe('https://example.com/cover.jpg')
+    })
+
+    it('should return undefined when no URLs are provided', () => {
+      const result = getImageUri(undefined, undefined, undefined)
+      expect(result).toBeUndefined()
+    })
+  })
+})
+
+describe('TemplateCard Component', () => {
+  describe('Memo Optimization', () => {
+    it('should be wrapped with React.memo', () => {
+      // TemplateCard should be a memoized component
+      expect(TemplateCard).toBeDefined()
+      // React.memo wraps the component, so we check if it's a valid element type
+      expect(typeof TemplateCard).toBe('object')
+    })
+  })
+})