Skip to content

Commit 1750cec

Browse files
Phosphorus-MPhosphorus-M
committed
feat: update dependencies, enhance resource components, and add new SVG assets
1 parent c622638 commit 1750cec

File tree

7 files changed

+108
-16
lines changed

7 files changed

+108
-16
lines changed

‎Cargo.lock‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Cargo.toml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ site-pkg-dir = "pkg"
7070
# Optional. Env: LEPTOS_ASSETS_DIR.
7171
assets-dir = "assets"
7272
# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
73-
site-addr = "127.0.0.1:3000"
73+
site-addr = "127.0.0.1:4561"
7474
# The port to use for automatic reload monitoring
75-
reload-port = 3001
75+
reload-port = 4562
7676
# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
7777
# [Windows] for non-WSL use "npx.cmd playwright test"
7878
# This binary name can be checked in Powershell with Get-Command npx

‎assets/new/background/card-resource-1.svg‎

Lines changed: 20 additions & 0 deletions
Loading

‎assets/new/background/card-resource-2.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎assets/new/background/card-resource.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎input.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,4 +95,15 @@
9595
/* clip-path: polygon(66% 0, 100% 32%, 100% 100%, 0 100%, 0 0), inset(0 0 0 0 round 0% 20% 0 0%); */
9696
aspect-ratio: 0.75;
9797
clip-path: shape(from 86.92% 2.32%,curve to 80.37% 0% with 85.31% 0.85%/82.91% 0%,hline to 8.48%,curve to 0% 6.36% with 3.8% 0%/0% 2.85%,vline to 93.64%,curve to 8.48% 100% with 0% 97.15%/3.8% 100%,hline to 91.52%,curve to 100% 93.64% with 96.2% 100%/100% 97.15%,vline to 16.52%,curve to 98.07% 12.47% with 100% 15.04%/99.32% 13.61%,line to 86.92% 2.32%,close);
98+
}
99+
100+
101+
102+
.rustlanges-card--resource > svg {
103+
filter: drop-shadow(0px 0px 0px #000000) drop-shadow(4px 4px 0px #000000) url(#inset-shadow);
104+
@apply w-full h-auto;
105+
}
106+
107+
.rustlanges-card--resource-body {
108+
@apply absolute inset-0 flex justify-center items-center p-10;
98109
}

‎src/components/resources.rs‎

Lines changed: 61 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
use leptos::{component, prelude::*};
22
use rustlanges_components::{
3-
card::Card,
3+
badge::Badge,
4+
card::{Card, Variant as CardVariant},
5+
chip::{Chip, Variant as ChipVariant},
46
input::{Filter, InputSearch},
7+
tag::Tag,
58
};
69

710
type ResourceAlias = Vec<Filter>;
@@ -14,22 +17,67 @@ pub fn Resources() -> impl IntoView {
1417
}]);
1518

1619
view! {
17-
<section class="bg-light dark:bg-dark flex justify-center w-full">
18-
<div class="container">
20+
<section class="bg-light dark:bg-dark p-20 w-full">
21+
<div class="container px-40 mx-auto">
1922
<h2 class="text-h2 text-center mb-8 mt-16">"Recursos"</h2>
2023
<InputSearch on_change_filter=move |resource: ResourceAlias| () />
21-
<div class="flex flex-row flex-nowrap gap-4 overflow-x-auto pb-8 pt-4 grid grid-cols-3">
22-
<Card class="resource-card min-w-20 min-h-20 p-4">
23-
<p>"Recurso 1"</p>
24-
</Card>
25-
<Card class="resource-card min-w-20 min-h-20 p-4">
26-
<p>"Recurso 1"</p>
24+
<div class="gap-4 overflow-x-auto p-4 grid justify-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
25+
26+
<Card class="p-4" variant=CardVariant::Resource>
27+
<div class="flex flex-col gap-4 justify-between h-full">
28+
<div>
29+
<Chip label="Destacado" variant=ChipVariant::Featured />
30+
<h2 class="text-h3 mt-2 mb-2">"Título del recurso"</h2>
31+
<p class="text-paragraph-2 mb-4">"Descripción del recurso"</p>
32+
<p class="text-paragraph-3 mb-4">
33+
"Lorem ipsum dolor sit amet consectetur."
34+
</p>
35+
</div>
36+
37+
<div class="flex gap-2 flex-wrap">
38+
<Tag label="#tag" />
39+
<Tag label="#tag" />
40+
<Tag label="#tag" />
41+
</div>
42+
</div>
2743
</Card>
28-
<Card class="resource-card min-w-20 min-h-20 p-4">
29-
<p>"Recurso 1"</p>
44+
45+
<Card class="p-4" variant=CardVariant::Resource>
46+
<div class="flex flex-col gap-4 justify-between h-full">
47+
<div>
48+
<Chip label="Destacado" variant=ChipVariant::Featured />
49+
<h2 class="text-h3 mt-2 mb-2">"Título del recurso"</h2>
50+
<p class="text-paragraph-2 mb-4">"Descripción del recurso"</p>
51+
<p class="text-paragraph-3 mb-4">
52+
"Lorem ipsum dolor sit amet consectetur."
53+
</p>
54+
</div>
55+
56+
<div class="flex gap-2 flex-wrap">
57+
<Tag label="#tag" />
58+
<Tag label="#tag" />
59+
<Tag label="#tag" />
60+
</div>
61+
</div>
3062
</Card>
31-
<Card class="resource-card min-w-20 min-h-20 p-4">
32-
<p>"Recurso 1"</p>
63+
64+
<Card class="p-4" variant=CardVariant::Resource>
65+
<div class="flex flex-col gap-4 justify-between h-full">
66+
<div>
67+
<Chip label="Destacado" variant=ChipVariant::Featured />
68+
<h2 class="text-h3 mt-2 mb-2">"Título del recurso"</h2>
69+
<p class="text-paragraph-2 mb-4">"Descripción del recurso"</p>
70+
<p class="text-paragraph-3 mb-4">
71+
"Lorem ipsum dolor sit amet consectetur."
72+
</p>
73+
</div>
74+
75+
<div class="flex gap-2 flex-wrap">
76+
<Tag label="#tag" />
77+
<Tag label="#tag" />
78+
<Tag label="#tag" />
79+
</div>
80+
</div>
3381
</Card>
3482
</div>
3583
</div>

0 commit comments

Comments
 (0)