3d698c8 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

components: add ResourceCard, GatewayImage

3d698c8Matilde Park4 years ago

components/ResourceCard.jsnew file+13

compare with master

unifiedsplit

@@ -0,0 +1,13 @@

1+import Link from "next/link";

2+import GatewayImage from "./gateway/Image";

4+const ResourceCard = ({ type, shortcode, title, image }) => (

5+ <Link href={`/${type}s/${shortcode}`}>

6+ <div className="cursor-pointer rounded-xl bg-wall-100 p-4 flex items-center space-x-4">

7+ <GatewayImage image={image} size={50} />

8+ <a className="font-semibold">{title}</a>

9+ </div>

10+ </Link>

11+);

12+

13+export default ResourceCard;

components/gateway/Gateway404.js+1−19

@@ -5,31 +5,13 @@ import Section from "../Section";

5import Link from "next/link";

7const Gateway404 = ({ type }) => {

8− const error = (

9− <div className="overflow-hidden rounded-xl">

10− <svg

11− width="100"

12− height="100"

13− viewBox="0 0 100 100"

14− fill="none"

15− xmlns="http://www.w3.org/2000/svg"

16− >

17− <rect width="100" height="100" rx="10" fill="#24201E" />

18− <path

19− d="M28.8906 27.9844C28.5019 28.0215 28.1699 28.2833 28.043 28.6524C27.914 29.0235 28.0137 29.4336 28.2969 29.7032L70.2969 71.7032C70.4844 71.8965 70.7402 72.0059 71.0098 72.0059C71.2773 72.0079 71.5352 71.9004 71.7246 71.709C71.9141 71.5176 72.0176 71.2598 72.0137 70.9903C72.0098 70.7227 71.8984 70.4668 71.7031 70.2813L66.2501 64.8283C69.8204 60.9181 72.0001 55.7073 72.0001 50.0003C72.0001 37.8618 62.1386 28.0003 50.0001 28.0003C44.2931 28.0003 39.0976 30.1956 35.1876 33.7658L29.7031 28.2813C29.4922 28.0645 29.1934 27.9551 28.8906 27.9844L28.8906 27.9844ZM50.0001 30C61.0566 30 70.0001 38.9435 70.0001 50C70.0001 55.17 68.0411 59.8575 64.8281 63.406L36.5936 35.1715C40.1405 31.9606 44.8336 29.9995 49.9996 29.9995L50.0001 30ZM32.1721 37.8125C31.842 37.8321 31.5452 38.0137 31.3752 38.2969C29.2424 41.6856 28.0002 45.7029 28.0002 49.9999C28.0002 62.1384 37.8617 71.9999 50.0002 71.9999C54.2951 71.9999 58.3147 70.7558 61.7032 68.6249C62.1739 68.3319 62.3165 67.7128 62.0235 67.2421C61.7305 66.7714 61.1114 66.6288 60.6407 66.9218C57.5587 68.8593 53.9122 69.9999 50.0002 69.9999C38.9437 69.9999 30.0002 61.0564 30.0002 49.9999C30.0002 46.0878 31.1233 42.4414 33.0627 39.3594C33.2697 39.043 33.2815 38.6387 33.092 38.3125C32.9045 37.9844 32.5491 37.7929 32.1721 37.8125L32.1721 37.8125Z"

20− fill="white"

21− />

22− </svg>

23− </div>

24− );

25−

26 return (

8 return (

27 <Container>

9 <Container>

28 <SingleColumn>

10 <SingleColumn>

29 <Section narrow className="space-y-12">

11 <Section narrow className="space-y-12">

30 <GatewayHeader

12 <GatewayHeader

31 title="Error 404"

13 title="Error 404"

32− error={error}

14+ error

33 item={`No ${type} at this address`}

15 item={`No ${type} at this address`}

34 />

16 />

35 <hr className="text-wall-200" />

17 <hr className="text-wall-200" />

components/gateway/GatewayHeader.js+4−15

@@ -1,20 +1,9 @@

1+import GatewayImage from "./Image";

1−const GatewayHeader = ({ image, sigil, error, title, item }) => {

3+const GatewayHeader = ({ image, patp, error, title, item }) => {

2 return (

4 return (

3 <div className="flex items-center space-x-4">

5 <div className="flex items-center space-x-4">

4− {image ? (

6+ <GatewayImage patp={patp} image={image} error={error} />

5− <img className="rounded-xl" src={image} height={100} width={100} />

6− ) : (

7− !sigil &&

8− !error && (

9− <img

10− className="object-contain shadow-sm rounded-xl"

11− style={{ height: 100, width: 100 }}

12− src="https://media.urbit.org/logo/urbit-logo-card.png"

13− />

14− )

15− )}

16− {error && error}

17− {sigil && sigil}

18 <div className="flex flex-col">

7 <div className="flex flex-col">

19 <h2>{title}</h2>

8 <h2>{title}</h2>

20 <p>{item}</p>

9 <p>{item}</p>

components/gateway/Image.jsnew file+52

@@ -0,0 +1,52 @@

1+import Sigil from "../Sigil";

3+const GatewayImage = ({

4+ error = false,

5+ patp = false,

6+ image = false,

7+ size = 100,

8+}) => {

9+ if (error) {

10+ return (

11+ <div className="overflow-hidden rounded-xl">

12+ <svg

13+ width={size}

14+ height={size}

15+ viewBox="0 0 100 100"

16+ fill="none"

17+ xmlns="http://www.w3.org/2000/svg"

18+ >

19+ <rect width="100" height="100" rx="10" fill="#24201E" />

20+ <path

21+ d="M28.8906 27.9844C28.5019 28.0215 28.1699 28.2833 28.043 28.6524C27.914 29.0235 28.0137 29.4336 28.2969 29.7032L70.2969 71.7032C70.4844 71.8965 70.7402 72.0059 71.0098 72.0059C71.2773 72.0079 71.5352 71.9004 71.7246 71.709C71.9141 71.5176 72.0176 71.2598 72.0137 70.9903C72.0098 70.7227 71.8984 70.4668 71.7031 70.2813L66.2501 64.8283C69.8204 60.9181 72.0001 55.7073 72.0001 50.0003C72.0001 37.8618 62.1386 28.0003 50.0001 28.0003C44.2931 28.0003 39.0976 30.1956 35.1876 33.7658L29.7031 28.2813C29.4922 28.0645 29.1934 27.9551 28.8906 27.9844L28.8906 27.9844ZM50.0001 30C61.0566 30 70.0001 38.9435 70.0001 50C70.0001 55.17 68.0411 59.8575 64.8281 63.406L36.5936 35.1715C40.1405 31.9606 44.8336 29.9995 49.9996 29.9995L50.0001 30ZM32.1721 37.8125C31.842 37.8321 31.5452 38.0137 31.3752 38.2969C29.2424 41.6856 28.0002 45.7029 28.0002 49.9999C28.0002 62.1384 37.8617 71.9999 50.0002 71.9999C54.2951 71.9999 58.3147 70.7558 61.7032 68.6249C62.1739 68.3319 62.3165 67.7128 62.0235 67.2421C61.7305 66.7714 61.1114 66.6288 60.6407 66.9218C57.5587 68.8593 53.9122 69.9999 50.0002 69.9999C38.9437 69.9999 30.0002 61.0564 30.0002 49.9999C30.0002 46.0878 31.1233 42.4414 33.0627 39.3594C33.2697 39.043 33.2815 38.6387 33.092 38.3125C32.9045 37.9844 32.5491 37.7929 32.1721 37.8125L32.1721 37.8125Z"

22+ fill="white"

23+ />

24+ </svg>

25+ </div>

26+ );

27+ }

28+

29+ if (patp) {

30+ return (

31+ <div className="rounded-xl overflow-hidden">

32+ <Sigil patp={patp} size={size} />

33+ </div>

34+ );

35+ }

36+

37+ return image ? (

38+ <img

39+ className="rounded-xl"

40+ src={image}

41+ style={{ height: size, width: size }}

42+ />

43+ ) : (

44+ <img

45+ className="object-contain shadow-sm rounded-xl"

46+ style={{ height: size, width: size }}

47+ src="https://media.urbit.org/logo/urbit-logo-card.png"

48+ />

49+ );

50+};

51+

52+export default GatewayImage;

pages/ids/[id].js+11−29

@@ -7,7 +7,7 @@ import SingleColumn from "../../components/SingleColumn";

7import Section from "../../components/Section";

8import ob from "urbit-ob";

9import Markdown from "../../components/Markdown";

10−import Sigil from "../../components/Sigil";

10+import ResourceCard from "../../components/ResourceCard";

11import GatewayHeader from "../../components/gateway/GatewayHeader";

12import Gateway404 from "../../components/gateway/Gateway404";

13import MetadataBlock from "../../components/gateway/MetadataBlock";

@@ -33,12 +33,6 @@ const IdPage = ({ data, markdown, applications, groups, network, params }) => {

33 // Galaxies shouldn't show parents, so store it as boolean here for reference.

34 const isGalaxy = ob.clan(id) === "galaxy";

36− const sigil = (

37− <div className="rounded-xl overflow-hidden">

38− <Sigil patp={id} size={100} />

39− </div>

40− );

41−

42 return (

36 return (

43 <Container>

37 <Container>

44 <Head>

38 <Head>

@@ -66,7 +60,7 @@ const IdPage = ({ data, markdown, applications, groups, network, params }) => {

66 <GatewayHeader

60 <GatewayHeader

67 title={id}

61 title={id}

68 image={data?.image || false}

62 image={data?.image || false}

69− sigil={sigil}

63+ patp={id}

70 item="Urbit ID"

64 item="Urbit ID"

71 />

65 />

72 <div className="flex flex-wrap md:flex-nowrap justify-between">

66 <div className="flex flex-wrap md:flex-nowrap justify-between">

@@ -98,15 +92,10 @@ const IdPage = ({ data, markdown, applications, groups, network, params }) => {

98 <Creations

92 <Creations

99 title="Applications"

93 title="Applications"

100 id={id}

94 id={id}

101− parentSlug="application"

95+ type="application"

102 data={applications}

96 data={applications}

103 />

97 />

104− <Creations

105− title="Hosted Groups"

98+ <Creations title="Hosted Groups" id={id} type="group" data={groups} />

106− id={id}

107− parentSlug="group"

108− data={groups}

109− />

110 <Description

99 <Description

111 description={data.description}

100 description={data.description}

112 fallback="An Urbit ID."

101 fallback="An Urbit ID."

@@ -169,26 +158,19 @@ const IdPage = ({ data, markdown, applications, groups, network, params }) => {

169 );

158 );

170};

159};

171

160

172−const Creations = ({ id, title, data, parentSlug }) => {

161+const Creations = ({ id, title, data, type }) => {

173 return (

162 return (

174 data?.length > 0 && (

163 data?.length > 0 && (

175 <div className="flex space-y-2 flex-col">

164 <div className="flex space-y-2 flex-col">

176 <p className="text-wall-400 font-semibold">{title}</p>

165 <p className="text-wall-400 font-semibold">{title}</p>

177 <div className="flex flex-wrap space-x-4">

166 <div className="flex flex-wrap space-x-4">

178 {data.map((each) => (

167 {data.map((each) => (

168+ <ResourceCard

169+ type={type}

179− <Link href={`/${parentSlug}/${id}/${each.slug}`}>

170+ shortcode={`${id}/${each.slug}`}

180− <div className="cursor-pointer rounded-xl bg-wall-100 p-4 flex items-center space-x-4">

171+ title={each.title}

181− <img

182− className="overflow-hidden rounded-xl"

183− style={{ width: 50, height: 50 }}

184− src={

185− each?.image ||

172+ image={each.image}

186− "https://media.urbit.org/logo/urbit-logo-card.png"

187− }

188− />

173+ />

189− <a className="font-semibold">{each.title}</a>

190− </div>

191− </Link>

192 ))}

174 ))}

193 </div>

175 </div>

194 </div>

176 </div>