job-listings-rendering.md

გახსენით job listings პროექტის ბმული: https://stackblitz.com/edit/vitejs-vite-io9aoctc?file=src%2FApp.jsx

კოდი გადმოწერეთ თქვენს კომპიუტერებში და გადახედეთ რა წერია, როგორ მუშაობს.

დავალება ეხება კომპონენტებად დაყოფას და პირობით rendering-ს. გამოიყენეთ ?, &&, || ოპერატორები ან if/else/else if.

1. თუ ვაკანსია არის new ტიპის, გამოიტანეთ badge "new". სხვა შემთხვევაში არაფერი.
2. თუ ვაკანსია არის featured ტიპის, გამოიტანეთ badge "featured" და მარცხენა კიდეზე დაამატეთ მწვანე highlight. სხვა შემთხვევაში არაფერი.
3. თუ ვაკანსიას არ აქვს კომპანიის ლოგო (logo: null data.json-ში), გამოიტანეთ public/images/company-placeholder.svg სურათი. თუმცა ხელით არ უნდა შეცვალოთ data.json. Javascript-ით უნდა შეამოწმოთ არის თუ არა null logo ატრიბუტი. ეს სურათი უნდა იყოს წრიული, როგორც დანარჩენი კომპანიის ლოგოები.
4. ვაკანსიის ბარათში მესამე სვეტად დაამატეთ tag-ები: ახალ ფაილში შექმენით კომპონენტი TagList.jsx, რომელსაც prop-ად გადაეცემა tags სია. ამ სიის მიხედვით უნდა დააგენერიროს tag ელემენტები (ღილაკები ან ლინკები). ListingCard.jsx-მა უნდა დაარენდეროს TagList კომპონენტი და prop-ად გადასცეს tags სია. განლაგების/layout-ისთვის როგორც გინდათ შეცვალეთ HTML სტრუქტურა, თუ დაგჭირდებათ. რაც გინდათ წაშალეთ ან დაამატეთ, მთავარია დიზაინს ემთხვეოდეს.
5. შექმენით ახალი ფოლდერი src/components. App.jsx-ში ჩაწერილი კოდიდან ამოიღეთ განმეორებადი, საერთო HTML სტრუქტურა და დაამატეთ ახალ კომპონენტში - ListingCard.jsx. App.jsx-მა data.json-ის და map-ის გამოყენებით უნდა გამოიტანოს ყველა ვაკანსიის ელემენტი.

პირობის ნომრები და შესაბამისი ვიზუალური ნაწილი:

სად ვნახოთ new, featured, tags და ლოგოზე ინფორმაცია? ეს ინფორმაცია მოცემულია data.json-ში.

შენიშვნა tag-ებზე: data.json-ში, ვაკანსიის ობიექტებზე, არ გვაქვს ერთიანი სია tags: [...]. ნაწილ-ნაწილ არის მოცემული რამდენიმე ატრიბუტი, რომლებიც tag-ებად ითვლება: languages, tools, level და role. თქვენი მიზანია ეს 4 სია ერთ სიად გააერთიანოთ Javascript კოდით და ერთიანად გამოიყენოთ.