Device Mockup

The Mishka Chelekom DeviceMockup component is a Phoenix LiveView component that allows developers to create dynamic and customizable device mockups, perfect for showcasing applications, media, or content on various devices such as iPhone, Android, and more. It offers flexibility in layout, color themes, and content slots, providing a professional and engaging display.

This Phoenix LiveView component also supports adding images, responsive content, and custom themes, making it ideal for enhancing both the visual design and usability of media presentations. With its versatility and ease of integration, the DeviceMockup component boosts the visual appeal and interaction of any project.

The DeviceMockup component, when set to the iphone type, allows developers to simulate an iPhone display within their applications. It provides a sleek, responsive design to showcase content or media inside the mockup frame, and supports various color themes and layouts. The iPhone mockup can display images or custom content, making it ideal for app previews, marketing pages, or product demos, ensuring a polished and professional look that aligns with the iPhone's distinct style.

<!--The default type is iPhone, so you can skip specifying it.-->
<.device_mockup image="/path" />

The DeviceMockup component, when set to the android type, allows developers to simulate an Android device display within their applications. It offers a responsive and customizable layout to showcase content, images, or media in an Android-style frame. With support for different color themes and flexible layout options, this mockup is perfect for presenting app previews or product demonstrations. The Android mockup ensures a modern and professional look, tailored to reflect the versatility of Android devices.

<.device_mockup image="/path" type="android" />

The DeviceMockup component, when set to the watch type, allows developers to simulate a smartwatch display within their applications. This mockup is perfect for showcasing content or media specifically designed for smaller screens, such as apps or features tailored to smartwatches. With its circular frame and responsive layout, the watch mockup supports customizable color themes and the ability to include images or dynamic content, providing an engaging and sleek presentation for smartwatch app previews or promotional materials.

<.device_mockup image="/path" type="watch" />

The DeviceMockup component, when set to the ipad type, allows developers to simulate an iPad display within their applications. This mockup provides a larger screen frame, ideal for showcasing content such as app interfaces, media, or detailed product previews. With support for customizable color themes, images, and flexible content slots, the iPad mockup is perfect for demonstrating responsive designs or creating interactive presentations. The mockup ensures a visually appealing and professional display, tailored to reflect the sleek and modern look of an iPad.

<.device_mockup image="/path" type="ipad" />

The Mishka Phoenix DeviceMockup component, when set to the laptop type, allows developers to simulate a laptop display within their applications. This mockup provides a wide screen layout, making it ideal for showcasing web apps, dashboards, or detailed product previews that benefit from a larger display area. With customizable color themes, image support, and flexible content slots, the laptop mockup is perfect for demonstrating responsive designs, offering a polished and professional look that mirrors the experience of using a real laptop.

<.device_mockup image="/path" type="laptop" />

The DeviceMockup component, when set to the imac type, allows developers to simulate an iMac display within their applications. This mockup offers a large, high-resolution screen frame, ideal for showcasing intricate designs, web apps, or detailed product demos that require more screen real estate. With customizable color themes, support for images, and flexible content slots, the iMac mockup provides a sleek, professional presentation that mirrors the premium experience of an actual iMac, making it perfect for high-end app previews or multimedia displays.

<.device_mockup image="/path" type="imac" />

The DeviceMockup component offers a variety of color themes to help match your design needs. You can choose from classic options like natural, and silver or opt for more vibrant themes such as primary, secondary, and success. For alert-style mockups, you can use warning, danger, or info. Additionally, unique options like misc and dawn are available to add a more customized touch.

<.device_mockup type="imac" color="base" />
<.device_mockup type="imac" color="silver" />
<.device_mockup type="watch" color="primary" />
<.device_mockup color="secondary" />
<.device_mockup type="ipad" color="success" />
<.device_mockup type="android" color="warning" />
<.device_mockup color="danger" />
<.device_mockup type="iphone" color="info" />
<.device_mockup type="imac" color="natural" />
<.device_mockup type="android" color="misc" />
<.device_mockup type="watch" color="dawn" />
<.device_mockup type="ipad" color="silver" />

The image prop allows you to display an image within every mockup type, whether it's an iPhone, Android, iPad, or other devices. You can easily control how the image looks with the image_class prop by adding custom CSS classes for styling and responsiveness. The alt prop ensures the image has an accessible description for users and search engines. You should consider an image sized perfectly for the mockup to ensure it displays correctly and maintains a professional look.

<.device_mockup image="/path" image_class="your_classes" />

The DeviceMockup component allows you to insert any HTML content within the mockup, regardless of the device type you choose. Whether you're working with an iPhone, Android, iPad, or iMac mockup, you can add custom content such as text, images, buttons, or even complex layouts inside the device frame. This flexibility makes it ideal for showcasing app interfaces, media, or any other content, providing a realistic and engaging presentation for your application.

<.device_mockup>
  <div class="bg-white h-full pt-8 pb-2 px-1 space-y-3">
    <div class="space-y-1">
      <label class="text-sm font-medium">Name</label>
      <input class="rounded-lg border bg-gray-200"  placeholder="Enter your name"/>
    </div>
    <div class="space-y-1">
      <label class="text-sm font-medium">Family</label>
      <input class="rounded-lg border bg-gray-200" placeholder="Enter your family">
    </div>
    <div class="space-y-1">
      <label class="text-sm font-medium">Job title</label>
      <input class="rounded-lg border bg-gray-200" placeholder="Enter your job title" />
    </div>
    <div class="space-y-1">
      <label class="text-sm font-medium">Graduation Date</label>
      <input class="rounded-lg border bg-gray-200" placeholder="Select a date" />
      </div>
    <div class="space-y-5">
      <div class="text-xs">By signing up you accepted terms of services</div>
      <button class="p-1 bg-teal-500 text-white rounded-lg">Sign up</button>
    </div>
  </div>
</.device_mockup>