flowbite-svelte 0.24.3 → 0.24.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -0
- package/buttons/Button.svelte +9 -4
- package/buttons/Button.svelte.d.ts +1 -0
- package/forms/Iconinput.svelte +0 -1
- package/forms/Iconinput.svelte.d.ts +0 -1
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/package.json +3 -1
- package/ratings/Rating.svelte +19 -12
- package/ratings/Rating.svelte.d.ts +2 -0
- package/ratings/RatingComment.svelte +54 -79
- package/ratings/RatingComment.svelte.d.ts +14 -3
- package/ratings/Review.svelte +72 -0
- package/ratings/Review.svelte.d.ts +34 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,37 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.24.6](https://github.com/themesberg/flowbite-svelte/compare/v0.24.5...v0.24.6) (2022-08-11)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add Review component ([d41b11d](https://github.com/themesberg/flowbite-svelte/commit/d41b11d4ef00d1d6d0d824d4fcdc9c964a78a7d2))
|
|
11
|
+
|
|
12
|
+
### [0.24.5](https://github.com/themesberg/flowbite-svelte/compare/v0.24.4...v0.24.5) (2022-08-11)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* add rating count and update app.css ([e5d642b](https://github.com/themesberg/flowbite-svelte/commit/e5d642b4a246c1716db8461e6ecbc26a7abad9d0))
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* h3 change, modal page update ([945762f](https://github.com/themesberg/flowbite-svelte/commit/945762f325736ac316a7d1cb68d546f0c8acd982))
|
|
23
|
+
* RatingComment component ([032aa24](https://github.com/themesberg/flowbite-svelte/commit/032aa24925f082459992104d5040804e0d532153))
|
|
24
|
+
* update rating page for AdvancedRating ([f1dc978](https://github.com/themesberg/flowbite-svelte/commit/f1dc978b5775e0089cc6c8aa1fac1c5ed8b97dca))
|
|
25
|
+
|
|
26
|
+
### [0.24.4](https://github.com/themesberg/flowbite-svelte/compare/v0.24.3...v0.24.4) (2022-08-09)
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
### Bug Fixes
|
|
30
|
+
|
|
31
|
+
* remove custom from Button component ([6114f4c](https://github.com/themesberg/flowbite-svelte/commit/6114f4c9f5d9ad0848d5e7c000db6c4c9661ad39))
|
|
32
|
+
* remove h-4 w-4 from Iconinput example in the input-field page ([4d5f396](https://github.com/themesberg/flowbite-svelte/commit/4d5f396ea80389b88ec6a8437228d5dbadd46877))
|
|
33
|
+
* update Button component ([330aae9](https://github.com/themesberg/flowbite-svelte/commit/330aae91c6c1b19cbbd1f35177f5e4bac9de3904))
|
|
34
|
+
* update Iconinput ([2b4a7b5](https://github.com/themesberg/flowbite-svelte/commit/2b4a7b55f7db35f3e5b0cc042aa27a84ff741194))
|
|
35
|
+
|
|
5
36
|
### [0.24.3](https://github.com/themesberg/flowbite-svelte/compare/v0.24.2...v0.24.3) (2022-08-09)
|
|
6
37
|
|
|
7
38
|
|
package/buttons/Button.svelte
CHANGED
|
@@ -5,6 +5,7 @@ export let outline = false;
|
|
|
5
5
|
export let gradient = false;
|
|
6
6
|
export let size = 'md';
|
|
7
7
|
export let href = undefined;
|
|
8
|
+
export let btnClass = undefined;
|
|
8
9
|
export let color = 'blue';
|
|
9
10
|
export let shadow = null;
|
|
10
11
|
const background = getContext('background');
|
|
@@ -61,10 +62,14 @@ const sizeClasses = {
|
|
|
61
62
|
xl: 'px-6 py-3.5 text-base'
|
|
62
63
|
};
|
|
63
64
|
let buttonClass;
|
|
64
|
-
$: buttonClass =
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
$: buttonClass = btnClass
|
|
66
|
+
? btnClass
|
|
67
|
+
: classNames('group text-center font-medium focus:ring-4 focus:outline-none', outline && gradient
|
|
68
|
+
? 'p-0.5'
|
|
69
|
+
: 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
|
|
70
|
+
(background
|
|
71
|
+
? 'dark:bg-transparent dark:border-gray-700 dark:hover:border-gray-600'
|
|
72
|
+
: 'dark:bg-transparent dark:border-gray-800 dark:hover:border-gray-700'), pill ? 'rounded-full' : 'rounded-lg', shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
|
|
68
73
|
let gradientOutlineClass;
|
|
69
74
|
$: gradientOutlineClass = classNames('inline-flex items-center justify-center', sizeClasses[size], pill ? 'rounded-full' : 'rounded-md', 'bg-white text-gray-900 dark:bg-gray-900 dark:text-white', // this is limitation - no transparency
|
|
70
75
|
'transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit');
|
|
@@ -7,6 +7,7 @@ declare const __propDef: {
|
|
|
7
7
|
gradient?: boolean;
|
|
8
8
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
9
9
|
href?: string;
|
|
10
|
+
btnClass?: string;
|
|
10
11
|
color?: 'alternative' | 'blue' | 'cyan' | 'dark' | 'light' | 'lime' | 'green' | 'pink' | 'red' | 'teal' | 'yellow' | 'purple' | 'purpleToBlue' | 'cyanToBlue' | 'greenToBlue' | 'purpleToPink' | 'pinkToOrange' | 'tealToLime' | 'redToYellow';
|
|
11
12
|
shadow?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
|
|
12
13
|
};
|
package/forms/Iconinput.svelte
CHANGED
|
@@ -9,7 +9,6 @@ export let spanClass = 'inline-flex items-center px-3 text-sm text-gray-900 bg-g
|
|
|
9
9
|
export let noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
|
|
10
10
|
export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
|
|
11
11
|
export let iconClass = 'mr-2';
|
|
12
|
-
export let iconSize;
|
|
13
12
|
function setType(node) {
|
|
14
13
|
node.type = type;
|
|
15
14
|
}
|
package/index.d.ts
CHANGED
|
@@ -64,6 +64,8 @@ export { default as Progressbar } from './progressbars/Progressbar.svelte';
|
|
|
64
64
|
export { default as Rating } from './ratings/Rating.svelte';
|
|
65
65
|
export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
|
|
66
66
|
export { default as ScoreRating } from './ratings/ScoreRating.svelte';
|
|
67
|
+
export { default as RatingComment } from './ratings/RatingComment.svelte';
|
|
68
|
+
export { default as Review } from './ratings/Review.svelte';
|
|
67
69
|
export { default as Sidebar } from './sidebars/Sidebar.svelte';
|
|
68
70
|
export { default as SidebarItem } from './sidebars/SidebarItem.svelte';
|
|
69
71
|
export { default as SidebarBrand } from './sidebars/SidebarBrand.svelte';
|
package/index.js
CHANGED
|
@@ -87,6 +87,8 @@ export { default as Progressbar } from './progressbars/Progressbar.svelte';
|
|
|
87
87
|
export { default as Rating } from './ratings/Rating.svelte';
|
|
88
88
|
export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
|
|
89
89
|
export { default as ScoreRating } from './ratings/ScoreRating.svelte';
|
|
90
|
+
export { default as RatingComment } from './ratings/RatingComment.svelte';
|
|
91
|
+
export { default as Review } from './ratings/Review.svelte';
|
|
90
92
|
// Sidebar
|
|
91
93
|
export { default as Sidebar } from './sidebars/Sidebar.svelte';
|
|
92
94
|
export { default as SidebarItem } from './sidebars/SidebarItem.svelte';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.24.
|
|
3
|
+
"version": "0.24.6",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": {
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"prism-themes": "^1.9.0",
|
|
31
31
|
"svelte": "^3.47.0",
|
|
32
32
|
"svelte-check": "^2.8.0",
|
|
33
|
+
"svelte-flag-icons": "^0.1.0",
|
|
33
34
|
"svelte-heros": "^2.3.3",
|
|
34
35
|
"svelte-preprocess": "^4.10.7",
|
|
35
36
|
"svelte-sidebar-menu": "^0.8.4",
|
|
@@ -171,6 +172,7 @@
|
|
|
171
172
|
"./ratings/AdvancedRating.svelte": "./ratings/AdvancedRating.svelte",
|
|
172
173
|
"./ratings/Rating.svelte": "./ratings/Rating.svelte",
|
|
173
174
|
"./ratings/RatingComment.svelte": "./ratings/RatingComment.svelte",
|
|
175
|
+
"./ratings/Review.svelte": "./ratings/Review.svelte",
|
|
174
176
|
"./ratings/ScoreRating.svelte": "./ratings/ScoreRating.svelte",
|
|
175
177
|
"./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
|
|
176
178
|
"./sidebars/SidebarBrand.svelte": "./sidebars/SidebarBrand.svelte",
|
package/ratings/Rating.svelte
CHANGED
|
@@ -4,22 +4,29 @@ export let total = 5;
|
|
|
4
4
|
export let rating = 4;
|
|
5
5
|
// default is floor
|
|
6
6
|
export let ceil = false;
|
|
7
|
+
export let count = false;
|
|
7
8
|
let roundedRating = ceil ? Math.ceil(rating) : Math.floor(rating);
|
|
8
9
|
let grayStars = total - roundedRating;
|
|
9
10
|
</script>
|
|
10
11
|
|
|
11
12
|
<div class={divClass}>
|
|
12
|
-
{#
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
{
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
13
|
+
{#if count}
|
|
14
|
+
<Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
|
|
15
|
+
<p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
|
|
16
|
+
<slot />
|
|
17
|
+
{:else}
|
|
18
|
+
{#each Array(roundedRating) as _, star}
|
|
19
|
+
<slot name="ratingUp">
|
|
20
|
+
<Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
|
|
21
|
+
</slot>
|
|
22
|
+
{/each}
|
|
23
|
+
{#each Array(grayStars) as _, star}
|
|
24
|
+
<slot name="ratingDown">
|
|
25
|
+
<Star size="24" class="text-gray-300 dark:text-gray-500" />
|
|
26
|
+
</slot>
|
|
27
|
+
{/each}
|
|
28
|
+
{#if $$slots.text}
|
|
29
|
+
<slot name="text" />
|
|
30
|
+
{/if}
|
|
24
31
|
{/if}
|
|
25
32
|
</div>
|
|
@@ -1,91 +1,66 @@
|
|
|
1
|
-
<script>
|
|
1
|
+
<script>import Button from '../buttons/Button.svelte';
|
|
2
|
+
import { Star } from 'svelte-heros';
|
|
3
|
+
// default is floor
|
|
4
|
+
export let ceil = false;
|
|
5
|
+
export let helpfullink = '';
|
|
6
|
+
export let abuselink = '';
|
|
7
|
+
export let comment;
|
|
8
|
+
let roundedRating = ceil ? Math.ceil(comment.rating) : Math.floor(comment.rating);
|
|
9
|
+
let grayStars = comment.total - roundedRating;
|
|
2
10
|
</script>
|
|
3
11
|
|
|
4
12
|
<article>
|
|
5
13
|
<div class="flex items-center mb-4 space-x-4">
|
|
6
|
-
<img class="w-10 h-10 rounded-full" src={user.img.src} alt={user.img.alt} />
|
|
14
|
+
<img class="w-10 h-10 rounded-full" src={comment.user.img.src} alt={comment.user.img.alt} />
|
|
7
15
|
<div class="space-y-1 font-medium dark:text-white">
|
|
8
|
-
<p>
|
|
16
|
+
<p>
|
|
17
|
+
{comment.user.name}
|
|
18
|
+
<time datetime="2014-08-16 19:00" class="block text-sm text-gray-500 dark:text-gray-400"
|
|
19
|
+
>{comment.user.joined}</time
|
|
20
|
+
>
|
|
21
|
+
</p>
|
|
9
22
|
</div>
|
|
10
23
|
</div>
|
|
11
24
|
<div class="flex items-center mb-1">
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
28
|
-
/></svg
|
|
29
|
-
>
|
|
30
|
-
<svg
|
|
31
|
-
class="w-5 h-5 text-yellow-400"
|
|
32
|
-
fill="currentColor"
|
|
33
|
-
viewBox="0 0 20 20"
|
|
34
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
35
|
-
><path
|
|
36
|
-
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
37
|
-
/></svg
|
|
38
|
-
>
|
|
39
|
-
<svg
|
|
40
|
-
class="w-5 h-5 text-yellow-400"
|
|
41
|
-
fill="currentColor"
|
|
42
|
-
viewBox="0 0 20 20"
|
|
43
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
44
|
-
><path
|
|
45
|
-
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
46
|
-
/></svg
|
|
47
|
-
>
|
|
48
|
-
<svg
|
|
49
|
-
class="w-5 h-5 text-yellow-400"
|
|
50
|
-
fill="currentColor"
|
|
51
|
-
viewBox="0 0 20 20"
|
|
52
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
53
|
-
><path
|
|
54
|
-
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
55
|
-
/></svg
|
|
56
|
-
>
|
|
57
|
-
<h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
|
|
58
|
-
Thinking to buy another one!
|
|
59
|
-
</h3>
|
|
25
|
+
{#each Array(roundedRating) as _, star}
|
|
26
|
+
<slot name="ratingUp">
|
|
27
|
+
<Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
|
|
28
|
+
</slot>
|
|
29
|
+
{/each}
|
|
30
|
+
{#each Array(grayStars) as _, star}
|
|
31
|
+
<slot name="ratingDown">
|
|
32
|
+
<Star size="26" class="px-0.5 text-gray-300 dark:text-gray-500" />
|
|
33
|
+
</slot>
|
|
34
|
+
{/each}
|
|
35
|
+
{#if comment.heading}
|
|
36
|
+
<h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
|
|
37
|
+
{comment.heading}
|
|
38
|
+
</h3>
|
|
39
|
+
{/if}
|
|
60
40
|
</div>
|
|
61
|
-
|
|
62
|
-
<
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
Invicta and went in the shower with it to test the waterproofing.... No problems.
|
|
68
|
-
</p>
|
|
69
|
-
<p class="mb-3 font-light text-gray-500 dark:text-gray-400">
|
|
70
|
-
It is obviously not the same build quality as those very expensive watches. But that is like
|
|
71
|
-
comparing a Citroën to a Ferrari. This watch was well under £100! An absolute bargain.
|
|
72
|
-
</p>
|
|
73
|
-
<a
|
|
74
|
-
href="/"
|
|
75
|
-
class="block mb-5 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
|
|
76
|
-
>Read more</a
|
|
77
|
-
>
|
|
41
|
+
{#if comment.address || comment.datetime}
|
|
42
|
+
<footer class="mb-5 text-sm text-gray-500 dark:text-gray-400">
|
|
43
|
+
<p>Reviewed in {comment.address} on {comment.datetime}</p>
|
|
44
|
+
</footer>
|
|
45
|
+
{/if}
|
|
46
|
+
<slot />
|
|
78
47
|
<aside>
|
|
79
|
-
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
48
|
+
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
49
|
+
<slot name="evaluation" />
|
|
50
|
+
</p>
|
|
51
|
+
{#if helpfullink || abuselink}
|
|
52
|
+
<div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
|
|
53
|
+
{#if helpfullink}
|
|
54
|
+
<Button size="xs" href="/" color="dark">Helpful</Button>
|
|
55
|
+
{/if}
|
|
56
|
+
{#if abuselink}
|
|
57
|
+
<a
|
|
58
|
+
href={abuselink}
|
|
59
|
+
class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
|
|
60
|
+
>Report abuse</a
|
|
61
|
+
>
|
|
62
|
+
{/if}
|
|
63
|
+
</div>
|
|
64
|
+
{/if}
|
|
90
65
|
</aside>
|
|
91
66
|
</article>
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
2
|
declare const __propDef: {
|
|
3
3
|
props: {
|
|
4
|
+
ceil?: boolean;
|
|
5
|
+
helpfullink?: string;
|
|
6
|
+
abuselink?: string;
|
|
4
7
|
comment: {
|
|
5
8
|
id: string;
|
|
6
9
|
user: {
|
|
@@ -9,16 +12,24 @@ declare const __propDef: {
|
|
|
9
12
|
src: string;
|
|
10
13
|
alt: string;
|
|
11
14
|
};
|
|
12
|
-
|
|
15
|
+
joined: string;
|
|
13
16
|
};
|
|
17
|
+
total: number;
|
|
14
18
|
rating: number;
|
|
15
|
-
|
|
19
|
+
heading: string;
|
|
20
|
+
address: string;
|
|
21
|
+
datetime: string;
|
|
16
22
|
};
|
|
17
23
|
};
|
|
18
24
|
events: {
|
|
19
25
|
[evt: string]: CustomEvent<any>;
|
|
20
26
|
};
|
|
21
|
-
slots: {
|
|
27
|
+
slots: {
|
|
28
|
+
ratingUp: {};
|
|
29
|
+
ratingDown: {};
|
|
30
|
+
default: {};
|
|
31
|
+
evaluation: {};
|
|
32
|
+
};
|
|
22
33
|
};
|
|
23
34
|
export declare type RatingCommentProps = typeof __propDef.props;
|
|
24
35
|
export declare type RatingCommentEvents = typeof __propDef.events;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<script>import classNames from 'classnames';
|
|
2
|
+
export let review;
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<article class="md:gap-8 md:grid md:grid-cols-3">
|
|
6
|
+
<div>
|
|
7
|
+
<div class="flex items-center mb-6 space-x-4">
|
|
8
|
+
<img class="w-10 h-10 rounded-full" src={review.imgSrc} alt={review.imgAlt} />
|
|
9
|
+
<div class="space-y-1 font-medium dark:text-white">
|
|
10
|
+
<p>{review.name}</p>
|
|
11
|
+
{#if review.address}
|
|
12
|
+
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
|
|
13
|
+
{#if review.addressIcon}
|
|
14
|
+
<svelte:component this={review.addressIcon} />
|
|
15
|
+
{/if}
|
|
16
|
+
{review.address}
|
|
17
|
+
</div>
|
|
18
|
+
{/if}
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
{#if review.item || review.option1 || review.option2}
|
|
22
|
+
<ul class="space-y-4 text-sm text-gray-500 dark:text-gray-400">
|
|
23
|
+
{#if review.item}
|
|
24
|
+
<li class="flex items-center">
|
|
25
|
+
{#if review.itemIcon}
|
|
26
|
+
<svelte:component this={review.addressIcon} />
|
|
27
|
+
{/if}
|
|
28
|
+
{review.item}
|
|
29
|
+
</li>
|
|
30
|
+
{/if}
|
|
31
|
+
{#if review.option1}
|
|
32
|
+
<li class="flex items-center">
|
|
33
|
+
{#if review.option1Icon}
|
|
34
|
+
<svelte:component this={review.option1Icon} />
|
|
35
|
+
{/if}
|
|
36
|
+
{review.option1}
|
|
37
|
+
</li>
|
|
38
|
+
{/if}
|
|
39
|
+
{#if review.option2}
|
|
40
|
+
<li class="flex items-center">
|
|
41
|
+
{#if review.option2Icon}
|
|
42
|
+
<svelte:component this={review.option2Icon} />
|
|
43
|
+
{/if}
|
|
44
|
+
{review.option2}
|
|
45
|
+
</li>
|
|
46
|
+
{/if}
|
|
47
|
+
</ul>
|
|
48
|
+
{/if}
|
|
49
|
+
</div>
|
|
50
|
+
<div class="col-span-2 mt-6 md:mt-0">
|
|
51
|
+
<div class="flex items-start mb-5">
|
|
52
|
+
<div class="pr-4">
|
|
53
|
+
{#if review.date}
|
|
54
|
+
<footer>
|
|
55
|
+
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
|
56
|
+
Reviewed: {review.date}
|
|
57
|
+
</p>
|
|
58
|
+
</footer>
|
|
59
|
+
{/if}
|
|
60
|
+
<h4 class="text-xl font-bold text-gray-900 dark:text-white">
|
|
61
|
+
{review.title}
|
|
62
|
+
</h4>
|
|
63
|
+
</div>
|
|
64
|
+
<p
|
|
65
|
+
class="bg-blue-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded"
|
|
66
|
+
>
|
|
67
|
+
{review.rating}
|
|
68
|
+
</p>
|
|
69
|
+
</div>
|
|
70
|
+
<slot />
|
|
71
|
+
</div>
|
|
72
|
+
</article>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
import type { SvelteComponent } from 'svelte';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
review: {
|
|
6
|
+
name: string;
|
|
7
|
+
imgSrc: string;
|
|
8
|
+
imgAlt: string;
|
|
9
|
+
address: string;
|
|
10
|
+
addressIcon: typeof SvelteComponent;
|
|
11
|
+
reviewDate: string;
|
|
12
|
+
title: string;
|
|
13
|
+
rating: number;
|
|
14
|
+
item: string;
|
|
15
|
+
itemIcon: typeof SvelteComponent;
|
|
16
|
+
option1: string;
|
|
17
|
+
option1Icon: typeof SvelteComponent;
|
|
18
|
+
option2: string;
|
|
19
|
+
option2Icon: typeof SvelteComponent;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
events: {
|
|
23
|
+
[evt: string]: CustomEvent<any>;
|
|
24
|
+
};
|
|
25
|
+
slots: {
|
|
26
|
+
default: {};
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
export declare type ReviewProps = typeof __propDef.props;
|
|
30
|
+
export declare type ReviewEvents = typeof __propDef.events;
|
|
31
|
+
export declare type ReviewSlots = typeof __propDef.slots;
|
|
32
|
+
export default class Review extends SvelteComponentTyped<ReviewProps, ReviewEvents, ReviewSlots> {
|
|
33
|
+
}
|
|
34
|
+
export {};
|