dev day #77

frontend/src/components/home/BlogGrid.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { getArticles, Article } from '../../services/articles';
 import { Link as RouterLink } from 'react-router-dom';
 import { assetUrl } from '../../utils/url';
+import InstagramGeneratorButton from '../admin/InstagramGeneratorButton';
 
 const BlogCard: React.FC<{ article: Article }> = ({ article }) => {
   const link = article.slug ? `/news/${article.slug}` : `/articles/${article.id}`;
@@ -24,6 +25,7 @@ const BlogCard: React.FC<{ article: Article }> = ({ article }) => {
       borderColor={border}
       _hover={{ boxShadow: '2xl', transform: 'translateY(-4px)' }}
       transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+      position="relative"
     >
       <Box position="relative" overflow="hidden">
         <Image 
@@ -70,6 +72,14 @@ const BlogCard: React.FC<{ article: Article }> = ({ article }) => {
           )}
         </HStack>
       </VStack>
+      <Box position="absolute" top={2} right={2} zIndex={2}>
+        <InstagramGeneratorButton
+          article={article as any}
+          targetUrl={typeof window !== 'undefined' ? new URL(link, window.location.origin).toString() : undefined}
+          placement="inline"
+          size="sm"
+        />
+      </Box>
     </VStack>
   );
 };