Profile
ProfileHero
Full-width cover image banner with restaurant name, star rating, cuisine tags, and price level.
Profile
Profile components build the restaurant detail pages. The Hero and Navigation components anchor the page chrome; the sub-sections (About, Hours, Map, Contact, Reviews, etc.) are slotted into the page layout. Most components accept a restaurant prop typed to the RestaurantApiResponse interface from ~/types/restaurant — this is the actual shape returned by the API and used by useDomain().getRestaurantBySlug().
Components
<XRDProfileHero />
Full-width cover image banner (96/72 responsive height) with a gradient overlay. Displays the restaurant name, inline SVG star rating with half-star support, review count, cuisine types, and price range. Renders nothing when restaurant is null. Image fallback chain: restaurant.coverImage → restaurant.images[0] → built-in Unsplash photo.
<XRDProfileHero :restaurant="restaurant" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
restaurant | RestaurantApiResponse | null | required | Restaurant object; uses coverImage, images, name, averageRating, ratingCount, reviewCount, cuisineType[], priceRange. Pass null for skeleton/loading states. |
AI Context
category: Profile
package: "@xenterprises/nuxt-x-restaurants"
components:
- XRDProfileHero
use-when: >
Rendering the full-width cover image banner at the top of a restaurant
profile page with name, star rating, cuisine types, and price range.
Reads from a RestaurantApiResponse (the shape returned by the API).
typical-page-section: Top of restaurant profile page, above the navigation tabs.