31e8a0a · urbit.org · git.iko.soy

components/ecosystem/Badge.jsnew file+20

compare with master

unifiedsplit

@@ -0,0 +1,20 @@

1+import classnames from "classnames";

2+export default function EcosystemBadge({ type }) {

3+ return (

4+ <div

5+ className={classnames(

6+ "uppercase font-bold text-white text-xs w-fit rounded-lg mb-2 px-2 py-1",

7+ {

8+ "bg-[#B37ED7]": type === "Organization",

9+ "bg-[#83b2d4]": type === "Application",

10+ "bg-wall-600": type === "Podcast",

11+ "bg-[#8dd5b1]": type === "Marketplace",

12+ "bg-[#B5966D]": type === "Article",

13+ "bg-[#219DFF]": type === "Group",

14+ }

15+ )}

16+ >

17+ {type}

18+ </div>

19+ );

20+}

components/ecosystem/IndexCard.js+2−22

@@ -1,5 +1,5 @@

1import Link from "next/link";

2−import classnames from "classnames";

2+import EcosystemBadge from "./Badge";

3export default function IndexCard({ slug, feat }) {

4 return (

5 <Link href={slug}>

@@ -24,7 +24,7 @@ export default function IndexCard({ slug, feat }) {

24 )}

25 <div className="pt-4">

26 <p className="mb-2 font-semibold leading-5">{feat.title}</p>

27− {badge(feat.type)}

27+ <EcosystemBadge type={feat.type} />

28 <p className="text-sm leading-5">{feat?.description}</p>

29 </div>

30 </div>

@@ -32,23 +32,3 @@ export default function IndexCard({ slug, feat }) {

32 </Link>

33 );

34}

35−

36−const badge = (type) => {

37− return (

38− <div

39− className={classnames(

40− "uppercase font-bold text-white text-xs w-fit rounded-lg mb-5 px-2 py-1",

41− {

42− "bg-[#B37ED7]": type === "Organization",

43− "bg-[#83b2d4]": type === "Application",

44− "bg-[#219DFF]": type === "Group",

45− "bg-wall-600": type === "Podcast",

46− "bg-[#8dd5b1]": type === "Marketplace",

47− "bg-[#B5966D]": type === "Article",

48− }

49− )}

50− >

51− {type}

52− </div>

53− );

54−};

components/ecosystem/Post.js+4−21

@@ -1,5 +1,6 @@

1import { Markdown } from "@urbit/foundation-design-system";

2−import classnames from "classnames";

2+import EcosystemBadge from "./Badge";

3+

3import Link from "next/link";

4import Link from "next/link";

4export default function Post({ post }) {

5export default function Post({ post }) {

5 return ["featured-1", "featured-2", "featured-3"].map((feat) => {

6 return ["featured-1", "featured-2", "featured-3"].map((feat) => {

@@ -34,7 +35,7 @@ export default function Post({ post }) {

34 <h4 className="text-xl pb-2 leading-6 font-bold">

35 <h4 className="text-xl pb-2 leading-6 font-bold">

35 {post?.[feat].title}

36 {post?.[feat].title}

36 </h4>

37 </h4>

37− {badge(post[feat].type)}

38+ <EcosystemBadge type={post[feat].type} />

38 </div>

39 </div>

40 </div>

40 <div className="markdown mt-8 mb-8">

41 <div className="markdown mt-8 mb-8">

@@ -94,22 +95,4 @@ export default function Post({ post }) {

94 });

95 });

95}

96}

96

97

97−const badge = (type) => {

98+

98− return (

99− <div

100− className={classnames(

101− "uppercase font-bold text-white text-xs w-fit rounded-lg mb-2 px-2 py-1",

102− {

103− "bg-[#B37ED7]": type === "Organization",

104− "bg-[#83b2d4]": type === "Application",

105− "bg-wall-600": type === "Podcast",

106− "bg-[#8dd5b1]": type === "Marketplace",

107− "bg-[#B5966D]": type === "Article",

108− "bg-[#219DFF]": type === "Group",

109− }

110− )}

111− >

112− {type}

113− </div>

114− );

115−};