Vercel v0 ne kadar güçlü

shadcn/u' da olan alert componentini v0 ile açtım ve ve yapay zekaya çok gelişmiş şeyler yaptırabildim.

Öncelikle componenti bir anlat dedim. bana güzelcene açıkladı

başlangıçtaki component kodu şu şekildeydi:

<Alert>
      <Terminal className="h-4 w-4" />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the cli.
      </AlertDescription>
    </Alert>

componentteki terminalin yani iconun yerini daha iyi hale getirmek istedim. biraz daha sağ tarafta olmasını yani solda boşluk olup yazılar ile de arasındaki boşluğun artmasını istedim. v0 a şunu şöyledim:

terminal elementi çok yazılara yakın olmuş bir de küçük duruyor.

componenti değiştirdi ve şunu yaptı:

yazdığı kod ise şu şekilde

<Alert className="flex items-center">
      <Terminal className="h-6 w-6 mr-4 flex-shrink-0" />
      <div>
        <AlertTitle className="text-lg font-semibold mb-1">Heads up!</AlertTitle>
        <AlertDescription>
          You can add components to your app using the cli.
        </AlertDescription>
      </div>
    </Alert>

Her ne kadar benim istediğimi yapmasa da şu şekilde açıklama yaptı:

Bu güncellenmiş versiyonda şu değişiklikleri yaptım:

1. Terminal ikonunun boyutunu `h-6 w-6` ile büyüttüm (önceki `h-4 w-4` yerine).
2. İkona `mr-4` (margin-right) ekleyerek sağ tarafına boşluk bıraktım, böylece metinden daha uzak duracak.
3. İkona `flex-shrink-0` ekledim, böylece boyutu sabit kalacak ve içerik daraldığında küçülmeyecek.
4. Alert bileşenine `flex items-center` sınıflarını ekledim. Bu, içeriği yatayda hizalayacak ve Terminal ikonunu dikey olarak ortalayacak.
5. Başlık ve açıklama metnini bir `<div>` içine aldım, böylece ikon ile metin arasında daha iyi bir ayrım sağladım.
6. AlertTitle'a `text-lg font-semibold mb-1` sınıflarını ekleyerek başlığı biraz daha belirgin hale getirdim ve altına küçük bir boşluk ekledim.

Yaptığı şey güzel ama componentin kendisi güncellemedi benim istediğim componentin benim istediğim şekle gelmesi. Yapay zeka tam olarak beni burada etkiledi. Ben şu soruyu sordum

peki bunun yerine Alert componentinin source kodunu güncelliyemez misin.

Yapay zekanın asıl componenti güncellemesi:

Yaptığı açıklama:

Bu güncellenmiş versiyonda şu değişiklikleri yaptım:

1. Alert bileşenine `flex items-start` sınıfını ekledim. Bu, içeriği yatayda hizalayacak ve öğeleri üstten hizalayacak.
2. SVG (ikon) için CSS ayarlarını güncelledim:

1. `[&>svg]:top-4` ile ikonu biraz aşağı indirdim (önceki `top-3` yerine).
2. `[&>svg~*]:pl-7` ile ikondan sonraki içeriğe daha fazla sol padding ekledim (önceki `pl-6` yerine).

1. AlertTitle bileşenine `mb-1` (margin-bottom) ekleyerek başlık ile açıklama arasına küçük bir boşluk bıraktım.
2. AlertTitle'ın font ağırlığını `font-medium` olarak ayarladım, bu başlığı biraz daha belirgin yapacak.

Yapay zeka ile componentleri değiştirebilir kendi isteğinize göre yeni bir dizayn oluşturabilirsin. en son olarak şunu istedim. "title değişmesin diğer şeyler değişmesin. benim istediğim iconun sol tarafındaki boşluğun çok olması yani sol taraftaki boşluk iki katına çıkabilir ve sağ tarafındaki boşluğun yani yazılar ile boşluğun da artması."

Aşağıdan componentin son haline erişebilirsin. Hatta bunu projelerinde kullanabilirsin.

https://v0.build/pbYO0Ls