{"id":16049726,"url":"https://github.com/itsdevcoffee/react-dashboard","last_synced_at":"2025-03-12T02:48:08.123Z","repository":{"id":93357429,"uuid":"50961602","full_name":"itsdevcoffee/React-dashboard","owner":"itsdevcoffee","description":null,"archived":false,"fork":false,"pushed_at":"2016-02-03T00:47:30.000Z","size":5434,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-18T12:34:55.260Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itsdevcoffee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-03T00:16:18.000Z","updated_at":"2016-02-03T00:41:58.000Z","dependencies_parsed_at":"2023-06-02T11:00:44.832Z","dependency_job_id":null,"html_url":"https://github.com/itsdevcoffee/React-dashboard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevcoffee%2FReact-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevcoffee%2FReact-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevcoffee%2FReact-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevcoffee%2FReact-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsdevcoffee","download_url":"https://codeload.github.com/itsdevcoffee/React-dashboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243147270,"owners_count":20243745,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-09T00:26:35.021Z","updated_at":"2025-03-12T02:48:08.104Z","avatar_url":"https://github.com/itsdevcoffee.png","language":"JavaScript","readme":"# React Dashboard Module\n\nSo I decided to go with a different approach and make one component that can be one of the 4 styles if specified. I also separated out the grid system so you can define it on the components props.\n\n###Different Box Types\n\n- boxType=\"plain\"\n- boxType=\"cover\"\n- boxType=\"topBar\"\n- boxType=\"bottomBar\"\n\nNow depending on what box type you pick you have to use different(but similar) props:\n\n---\n\n#### boxType=\"plain\"\n- boxTitle=\"20\"\n- boxSubtitle=\"New Followers added this month\"\n- span=\"4\" (For how many columns you want it to span in the layout)\n\n---\n\n#### boxType=\"cover\"\n- boxTitle=\"18\u0026deg;\"\n- boxSubtitle=\"Texas\"\n- boxBackground=\"#FF8A00\"\n- span=\"12\"\n \n---\n\n#### boxType=\"topBar\"\n- boxTitle=\"New visitors\"\n- boxSubtitle=\"1.5k\"\n- boxBarBackground=\"#0096D0\"\n- span=\"12\"\n\n---\n\n#### boxType=\"bottomBar\"\nDefined an array of objects and pass it into boxInfo\n```\nvar bottomBarArray1 = [\n    {\"title\": 15080, \"subtitle\": \"Shots Views\"},\n    {\"title\": 12000, \"subtitle\": \"Likes\"},\n    {\"title\": 5100, \"subtitle\": \"Comments\"}\n];\n```\n- boxInfo={bottomBarArray1}\n- boxBarBackground=\"#484D4D\"\n- boxBackground=\"#0096D0\"\n- span=\"12\"\n\n---\n\n#### Final Version:\n![Fullscreen](http://i.imgur.com/ArivrMq.png?1)\n\n---\n\n#### Mobile Version:\n![Fullscreen](http://i.imgur.com/0nkpKM0.png?1)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdevcoffee%2Freact-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsdevcoffee%2Freact-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdevcoffee%2Freact-dashboard/lists"}