JobVacancyCardComponent
This code defines a Ruby class named `VacancyCardComponent`, which is a subclass of `ApplicationComponent`. This class represents a component, likely in a web application that uses a framework like Ruby on Rails with a component-based architecture, such as ViewComponent or similar.
The `template` method within this class constructs a user interface component that appears to be a styled card, specifically designed to display details of a job vacancy for a Software Engineer position. The card has the following elements:
1. **Card Structure**:
- It uses a base structure with classes for styling, likely coming from a CSS framework like Tailwind CSS or Bootstrap (e.g., `card`, `bg-base-100`, `shadow-xl`).
2. **Header**:
- It contains a header (`h2`) indicating the position title "Job Vacancy: Software Engineer", styled with a larger and bold text (`text-lg font-bold`).
3. **Description**:
- There is a paragraph (`p`) providing a brief summary or invitation for prospective job applicants, emphasizing teamwork and innovation in technology.
4. **Job Details**:
- An unordered list (`ul`) is included to detail specific aspects of the job:
- **Location**: Value is "Remote", indicating where the position is based.
- **Experience**: Requires "3+ years required".
- **Skills**: Lists necessary skills, specifically "Ruby, JavaScript, React".
5. **Actions**:
- A section is dedicated for card actions, aligning a button to the end of the card (`justify-end`).
- The button (`btn btn-square btn-sm`) contains an SVG icon of an "X" or a similar close symbol, providing a visual feature, possibly for dismissing the card.
Overall, this component encapsulates a job description efficiently using a well-structured and possibly reusable format that integrates both stylistic and functional elements controlled through classes and SVG graphics.
# frozen_string_literal: true
class VacancyCardComponent < ApplicationComponent
def template
div(class: "card w-96 bg-base-100 shadow-xl") do
div(class: "card-body") do
h2(class: "card-title text-lg font-bold") { "Job Vacancy: Software Engineer" }
p { "Join our dynamic team to work on challenging projects and help innovate the future of technology." }
ul(class: "list-disc pl-5") do
li { "Location: Remote" }
li { "Experience: 3+ years required" }
li { "Skills: Ruby, JavaScript, React" }
end
div(class: "card-actions justify-end") do
button(class: "btn btn-square btn-sm") do
svg(xmlns: "http://www.w3.org/2000/svg", class: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor") do |svg|
svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M6 18L18 6M6 6l12 12")
end
end
end
end
end
end
end