aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-31 20:24:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: built storycard

Browse Source
This commit is contained in:
MTG2000
2022-04-15 17:47:17 +03:00
parent 11317a2dc0
commit 1dbbbb210c
14 changed files with 317 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
package-lock.json generated
View File

@@ -21025,9 +21025,9 @@
}
},
"node_modules/is-core-module": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz",
"integrity": "sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==",
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
"integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==",
"dependencies": {
"has": "^1.0.3"
},
@@ -23970,9 +23970,9 @@
}
},
"node_modules/lilconfig": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.4.tgz",
"integrity": "sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==",
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
"integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==",
"dev": true,
"engines": {
"node": ">=10"
@@ -25681,9 +25681,9 @@
}
},
"node_modules/nanoid": {
"version": "3.1.30",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
"integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz",
"integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==",
"bin": {
"nanoid": "bin/nanoid.cjs"
},
@@ -52048,27 +52048,33 @@
}
},
"node_modules/purgecss/node_modules/postcss": {
"version": "8.4.4",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz",
"integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==",
"version": "8.4.12",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
"integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
}
],
"dependencies": {
"nanoid": "^3.1.30",
"nanoid": "^3.3.1",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.1"
"source-map-js": "^1.0.2"
},
"engines": {
"node": "^10 || ^12 || >=14"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
}
},
"node_modules/purgecss/node_modules/source-map-js": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
"integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
"dev": true,
"engines": {
"node": ">=0.10.0"
@@ -56865,6 +56871,18 @@
"node": ">=8"
}
},
"node_modules/supports-preserve-symlinks-flag": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true,
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/svg-parser": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
@@ -57144,13 +57162,16 @@
}
},
"node_modules/tailwindcss/node_modules/color": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/color/-/color-4.1.0.tgz",
"integrity": "sha512-o2rkkxyLGgYoeUy1OodXpbPAQNmlNBrirQ8ODO8QutzDiDMNdezSOZLNnusQ6pUpCQJUsaJIo9DZJKqa2HgH7A==",
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
"dev": true,
"dependencies": {
"color-convert": "^2.0.1",
"color-string": "^1.9.0"
},
"engines": {
"node": ">=12.5.0"
}
},
"node_modules/tailwindcss/node_modules/color-convert": {
@@ -57172,9 +57193,9 @@
"dev": true
},
"node_modules/tailwindcss/node_modules/fs-extra": {
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
"integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.1.tgz",
"integrity": "sha512-NbdoVMZso2Lsrn/QwLXOy6rm0ufY2zEOKCDzJR/0kBsb0E6qed0P3iYK+Ath3BfvXEeu4JhEtXLgILx5psUfag==",
"dev": true,
"dependencies": {
"graceful-fs": "^4.2.0",
@@ -57206,38 +57227,13 @@
"node": ">=8"
}
},
"node_modules/tailwindcss/node_modules/import-cwd": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
"integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==",
"dev": true,
"dependencies": {
"import-from": "^3.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/tailwindcss/node_modules/import-from": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
"integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==",
"dev": true,
"dependencies": {
"resolve-from": "^5.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/tailwindcss/node_modules/postcss-load-config": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
"integrity": "sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==",
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
"dev": true,
"dependencies": {
"import-cwd": "^3.0.0",
"lilconfig": "^2.0.3",
"lilconfig": "^2.0.5",
"yaml": "^1.10.2"
},
"engines": {
@@ -57248,22 +57244,30 @@
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": ">=8.0.9",
"ts-node": ">=9.0.0"
},
"peerDependenciesMeta": {
"postcss": {
"optional": true
},
"ts-node": {
"optional": true
}
}
},
"node_modules/tailwindcss/node_modules/resolve": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
"version": "1.22.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
"integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
"dev": true,
"dependencies": {
"is-core-module": "^2.2.0",
"path-parse": "^1.0.6"
"is-core-module": "^2.8.1",
"path-parse": "^1.0.7",
"supports-preserve-symlinks-flag": "^1.0.0"
},
"bin": {
"resolve": "bin/resolve"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
@@ -77058,9 +77062,9 @@
}
},
"is-core-module": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz",
"integrity": "sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==",
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
"integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==",
"requires": {
"has": "^1.0.3"
}
@@ -79238,9 +79242,9 @@
}
},
"lilconfig": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.4.tgz",
"integrity": "sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==",
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
"integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==",
"dev": true
},
"lines-and-columns": {
@@ -80595,9 +80599,9 @@
}
},
"nanoid": {
"version": "3.1.30",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
"integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ=="
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz",
"integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA=="
},
"nanomatch": {
"version": "1.2.13",
@@ -100914,20 +100918,20 @@
"dev": true
},
"postcss": {
"version": "8.4.4",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz",
"integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==",
"version": "8.4.12",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
"integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
"dev": true,
"requires": {
"nanoid": "^3.1.30",
"nanoid": "^3.3.1",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.1"
"source-map-js": "^1.0.2"
}
},
"source-map-js": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
"integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
"dev": true
}
}
@@ -104687,6 +104691,12 @@
}
}
},
"supports-preserve-symlinks-flag": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true
},
"svg-parser": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
@@ -104908,9 +104918,9 @@
}
},
"color": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/color/-/color-4.1.0.tgz",
"integrity": "sha512-o2rkkxyLGgYoeUy1OodXpbPAQNmlNBrirQ8ODO8QutzDiDMNdezSOZLNnusQ6pUpCQJUsaJIo9DZJKqa2HgH7A==",
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
"dev": true,
"requires": {
"color-convert": "^2.0.1",
@@ -104933,9 +104943,9 @@
"dev": true
},
"fs-extra": {
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
"integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.1.tgz",
"integrity": "sha512-NbdoVMZso2Lsrn/QwLXOy6rm0ufY2zEOKCDzJR/0kBsb0E6qed0P3iYK+Ath3BfvXEeu4JhEtXLgILx5psUfag==",
"dev": true,
"requires": {
"graceful-fs": "^4.2.0",
@@ -104958,43 +104968,25 @@
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true
},
"import-cwd": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
"integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==",
"dev": true,
"requires": {
"import-from": "^3.0.0"
}
},
"import-from": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
"integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==",
"dev": true,
"requires": {
"resolve-from": "^5.0.0"
}
},
"postcss-load-config": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
"integrity": "sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==",
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
"dev": true,
"requires": {
"import-cwd": "^3.0.0",
"lilconfig": "^2.0.3",
"lilconfig": "^2.0.5",
"yaml": "^1.10.2"
}
},
"resolve": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
"version": "1.22.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
"integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
"dev": true,
"requires": {
"is-core-module": "^2.2.0",
"path-parse": "^1.0.6"
"is-core-module": "^2.8.1",
"path-parse": "^1.0.7",
"supports-preserve-symlinks-flag": "^1.0.0"
}
},
"supports-color": {

11
src/Components/VotesCount/VotesCount.tsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
import { MdLocalFireDepartment } from 'react-icons/md'
export default function VotesCount({ count = 0 }: { count: number }) {
return (
<span className="chip-small bg-warning-50 text-gray-900 font-medium text-body5 py-4 px-16">
<MdLocalFireDepartment className='inline-block text-fire transform text-body4' />
<span className=' align-middle'> {count}</span>
</span>
)
}

23
src/features/Posts/Components/PostCard/Header.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react'
import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
interface Props {
name: string;
avatar: string;
date: string
}
export default function Header(props: Props) {
return (
<div className='flex gap-8'>
<Avatar width={40} src={props.avatar} />
<div>
<p className='text-body4 text-black font-medium'>{props.name}</p>
<p className='text-body6 text-gray-600'>{props.date}</p>
</div>
<p className="text-body5 text-gray-500 ml-auto ">
3h ago
</p>
</div>
)
}

19
src/features/Posts/Components/PostCard/PostCard.tsx Normal file
View File

@@ -0,0 +1,19 @@
type Props =
| {
type: 'story'
}
| {
type: 'question'
}
| {
type: 'bounty'
}
export default function PostCard(props: Props) {
if ('question' in props) {
}
return (
<div>StoryCard</div>
)
}

22
src/features/Posts/Components/PostCard/StoryCard.stories.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { MOCK_DATA } from 'src/mocks/data';
import StoryCard from './StoryCard';
export default {
title: 'Posts/Components/StoryCard',
component: StoryCard,
argTypes: {
backgroundColor: { control: 'color' },
},
} as ComponentMeta<typeof StoryCard>;
const Template: ComponentStory<typeof StoryCard> = (args) => <div className="max-w-[660px]"><StoryCard {...args} ></StoryCard></div>
export const Default = Template.bind({});
Default.args = {
story: MOCK_DATA['posts'].stories[0]
}

28
src/features/Posts/Components/PostCard/StoryCard.tsx Normal file
View File

@@ -0,0 +1,28 @@
import VotesCount from "src/Components/VotesCount/VotesCount"
import { Story } from "src/features/Posts/types"
import Header from "./Header"
import { BiComment } from 'react-icons/bi'
interface Props {
story: Story
}
export default function StoryCard({ story }: Props) {
return (
<div className="bg-white rounded-12 overflow-hidden border">
<img src={story.cover_image} className='h-[200px] w-full object-cover' alt="" />
<div className="p-24">
<Header name={story.author.name} avatar={story.author.image} date={story.date} />
<h2 className="text-h5 font-medium mt-16">{story.title}</h2>
<p className="text-body5 text-gray-600 mt-8">{story.excerpt}</p>
<hr className="my-16 bg-gray-200" />
<div className="flex gap-24">
<VotesCount count={story.votes_count} />
<div className="text-gray-600">
<BiComment /> <span className="align-middle text-body5">{story.comments_count} Comments</span>
</div>
</div>
</div>
</div>
)
}

2
src/features/Posts/Components/PostCard/index.tsx Normal file
View File

@@ -0,0 +1,2 @@
export { }

2
src/features/Posts/index.tsx Normal file
View File

@@ -0,0 +1,2 @@
export { }

36
src/features/Posts/types/index.ts Normal file
View File

@@ -0,0 +1,36 @@
import { Tag } from "src/utils/interfaces"
export type PostBase = {
id: number
title: string
date: string
author: {
id: number
name: string
image: string
}
excerpt: string
tags: Tag[]
votes_count: number
}
export type Story = PostBase & {
type: 'story'
cover_image: string;
comments_count: number
}
export type Bounty = PostBase & {
type: 'bounty'
cover_image: string;
reward_amount: number
deadline: string
applicants_count: number
}
export type Question = PostBase & {
type: 'question'
answers_count: number
}
export type Post = Story | Question | Bounty

21
src/features/Profiles/Components/Avatar/Avatar.stories.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Avatar from './Avatar';
export default {
title: 'Profile/Components/Avatar',
component: Avatar,
argTypes: {
backgroundColor: { control: 'color' },
},
} as ComponentMeta<typeof Avatar>;
const Template: ComponentStory<typeof Avatar> = (args) => <Avatar {...args} ></Avatar>
export const Default = Template.bind({});
Default.args = {
src: 'https://i.pravatar.cc/300'
}

15
src/features/Profiles/Components/Avatar/Avatar.tsx Normal file
View File

@@ -0,0 +1,15 @@
interface Props {
src: string;
alt?: string;
width?: number;
}
export default function Avatar({ src, alt, width = 40 }: Props) {
return (
<img src={src} className='rounded-full shadow-inner object-contain border border-gray-100' style={{
width: width,
height: width,
}} alt={alt ?? "avatar"} />
)
}

30
src/mocks/data.ts
View File

@@ -1,4 +1,5 @@
import ASSETS from "src/assets";
import { Story } from "src/features/Posts/types";
import { Project, ProjectCategory } from "src/utils/interfaces";
let categories = [
@@ -557,6 +558,32 @@ let projects = [
}
]
let posts = {
stories: [
{
id: 1,
title: 'Digital Editor, Mars Review of Books',
cover_image: "https://picsum.photos/id/10/1660/1200",
comments_count: 31,
date: 'April 13',
votes_count: 120,
excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
type: "story",
tags: [
{ id: 1, title: "lnurl" },
{ id: 2, title: "webln" },
{ id: 3, title: "guide" },
],
author: {
id: 12,
name: "John Doe",
image: "https://i.pravatar.cc/300?img=3"
}
}
] as Story[],
}
// Process Data
// ------------
@@ -570,5 +597,6 @@ categories = categories.map(c => ({ ...c, apps_count: projects.reduce((acc, p) =
export const MOCK_DATA = {
projects: projects as Project[],
categories: categories as ProjectCategory[]
categories: categories as ProjectCategory[],
posts: posts
}

5
src/utils/interfaces/misc.interfaces.ts
View File

@@ -1,4 +1,7 @@
export type Tag = {
id: number
title: string
}
export type Image = string;

1
tailwind.config.js
View File

@@ -1,6 +1,7 @@
module.exports = {
mode: "jit",
purge: [
"./src/features/**/*.{html,js,ts,tsx,jsx}",
"./src/pages/**/*.{html,js,ts,tsx,jsx}",
"./src/Components/**/*.{html,js,ts,tsx,jsx}",
"./src/layouts/**/*.{html,js,ts,tsx,jsx}",