shadcn.io is not affiliated with official shadcn/ui
Restaurant Food Reviews Block for Svelte
Fourteen visits to a neighbourhood restaurant: a score cell with a price tier, a dish table whose rows filter the visits, and visit cards with the dishes ordered and four criteria.
Installation
Overview
A restaurant reviews section for Svelte with Ark UI, for Brasa & Fennel, a fictional neighbourhood restaurant. A start-aligned header gives the count and the average, then a bento on shared hairlines. The score cell holds the average of the four per-visit criteria (food, service, ambience and value) as a large figure with half-star stars, a price tier drawn as four dollar glyphs with its words, and the four criteria as figures with bars. Beside it is a real table of eight dishes with the number of visits that ordered each, the average rating of those visits and a tag word ("Signature" or "Seasonal") with a glyph. A dish's name is a button: pressing it narrows the visits below to the ones that ordered it, a polite line says what shows, and Clear brings them all back. The two newest visits of the choice sit side by side with their stars, title, text, the dishes ordered, the four criteria and the diner. Every figure is worked out from the typed visits, an unseen copy of every choice holds the height, and on a phone the table drops its Orders column. It's built from Toggle, Rating, Badge, Avatar, Button and Guides, with a native table.
FAQ
How are the dish figures worked out?
From the typed VISITS. A dish's orders are the visits that ordered it, and its average is the mean of those visits' own ratings, one decimal by integer maths. A visit's rating is the average of its four criteria, to the nearest whole star. Edit DISHES and VISITS at the top of the file to use your own.
How does pressing a dish work?
Each dish name is a toggle button inside the table's row header. Pressing it narrows the visits to those that ordered it and marks the row; pressing it again, or Clear, shows every visit. Clear puts focus back on the dish that filtered. An unseen copy of every choice keeps the page from moving.
How is the price tier shown?
By four dollar glyphs, three of them full, and the words "Three of four, mains from $16 to $26". The words carry the meaning, so it never relies on the glyphs or a colour.
How are Signature and Seasonal marked?
By a glyph and the word (a chef's hat for Signature, a leaf for Seasonal), with a dash for a dish with neither. Nothing is tinted by colour.