import { Component } from '@angular/core';
import { Card, CardHeader, CardContent, CardFooter } from '@lib/card';
import { Button } from '@lib/button';
import { Badge } from '@lib/badge';
import { Avatar } from '@lib/avatar';

@Component({
  standalone: true,
  imports: [Card, CardHeader, CardContent, CardFooter, Button, Badge, Avatar],
  template: `
    <Card class="w-80 overflow-hidden">
      <div class="relative">
        <img src="product-image.jpg" alt="Product" class="w-full h-48 object-cover">
        <Badge class="absolute top-2 right-2" variant="destructive">-20%</Badge>
      </div>
      
      <CardHeader class="pb-3">
        <div class="flex justify-between items-start">
          <h3 class="font-semibold text-lg">Premium Headphones</h3>
          <div class="text-right">
            <p class="text-2xl font-bold">\$79</p>
            <p class="text-sm text-muted-foreground line-through">\$99</p>
          </div>
        </div>
      </CardHeader>
      
      <CardContent class="pt-0">
        <p class="text-muted-foreground text-sm mb-3">
          High-quality wireless headphones with noise cancellation
        </p>
        <div class="flex items-center gap-2">
          <div class="flex">
            <span class="text-yellow-400">★★★★★</span>
          </div>
          <span class="text-sm text-muted-foreground">(128 reviews)</span>
        </div>
      </CardContent>
      
      <CardFooter class="gap-2">
        <Button variant="outline" class="flex-1">Add to Cart</Button>
        <Button class="flex-1">Buy Now</Button>
      </CardFooter>
    </Card>
  `
})
export class ProductCardComponent {}

import { Component } from '@angular/core';
import { Card, CardHeader, CardContent } from '@lib/card';
import { Avatar } from '@lib/avatar';
import { Badge } from '@lib/badge';
import { Button } from '@lib/button';
import { Alert } from '@lib/alert';

@Component({
  standalone: true,
  imports: [Card, CardHeader, CardContent, Avatar, Badge, Button, Alert],
  template: `
    <div class="max-w-4xl mx-auto space-y-6">
      <!-- Profile Header -->
      <Card>
        <CardContent class="pt-6">
          <div class="flex items-center space-x-4">
            <Avatar class="h-20 w-20">
              <img src="avatar.jpg" alt="User Avatar">
            </Avatar>
            <div class="space-y-1">
              <h1 class="text-2xl font-bold">John Doe</h1>
              <p class="text-muted-foreground">Senior Frontend Developer</p>
              <div class="flex gap-2">
                <Badge variant="secondary">Angular Expert</Badge>
                <Badge variant="outline">TypeScript</Badge>
                <Badge>Open to Work</Badge>
              </div>
            </div>
            <div class="ml-auto">
              <Button>Edit Profile</Button>
            </div>
          </div>
        </CardContent>
      </Card>

      <!-- Stats Cards -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardContent class="pt-6">
            <div class="text-center">
              <div class="text-3xl font-bold text-blue-600">24</div>
              <p class="text-muted-foreground">Projects Completed</p>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent class="pt-6">
            <div class="text-center">
              <div class="text-3xl font-bold text-green-600">98%</div>
              <p class="text-muted-foreground">Client Satisfaction</p>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent class="pt-6">
            <div class="text-center">
              <div class="text-3xl font-bold text-purple-600">5+</div>
              <p class="text-muted-foreground">Years Experience</p>
            </div>
          </CardContent>
        </Card>
      </div>

      <!-- Notifications -->
      <Alert variant="success">
        <strong>Profile Updated!</strong> Your profile has been successfully updated.
      </Alert>
    </div>
  `
})
export class ProfileDashboardComponent {}

import { Component } from '@angular/core';
import { Carousel } from '@lib/carousel';
import { Card, CardContent } from '@lib/card';
import { Button } from '@lib/button';

@Component({
  standalone: true,
  imports: [Carousel, Card, CardContent, Button],
  template: `
    <Card class="max-w-4xl mx-auto">
      <CardContent class="p-6">
        <h2 class="text-2xl font-bold mb-6">Our Latest Projects</h2>
        
        <Carousel
          [images]="projectImages"
          [width]="800"
          [height]="400"
          [interval]="5000"
          class="rounded-lg overflow-hidden"
        />
        
        <div class="mt-6 text-center">
          <Button variant="outline">View All Projects</Button>
        </div>
      </CardContent>
    </Card>
  `
})
export class GalleryComponent {
  projectImages = [
    'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=400&fit=crop',
    'https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?w=800&h=400&fit=crop',
    'https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=400&fit=crop'
  ];
}

1. Install the package:

   npm install angular-superui class-variance-authority clsx tailwind-merge --legacy-peer-deps
   

2. Add CSS Variables:

   /* src/styles.css */
   @import "tailwindcss";
    refer to installation.md for full list of classes